如何使用jQuery.load更换一个div包括股利

Question

我有一个的“secondHeader” id的DIV，我想用“secondHeader”的相同ID的另一个div来替换整个格但不是替换它，它只是加载第一个加载的div。

$("#secondHeader").load("/logged-in-content.html #secondHeader"); 

这是什么情况？

<div id="secondHeader"><div id="secondHeader"></div></div> 

我希望发生的就是从阿贾克斯负载secondHeader div来完全取代secondHeader在初始页面。

我知道这听起来很愚蠢，但在这里就是我试图完成......当用户没有登录，他们看到一个非登录的头。我使用ajax来允许该用户登录该网站，并且我想通过ajax将未登录的标题替换为已登录的标题。

我都试过，我知道等应有尽有......

$("#secondHeader").replaceWith($("#secondHeader").load("/logged-in-content.html #secondHeader")); 

...和手之前，使用一个.remove（）...

任何想法？

Answer 1

我认为最好的方法是使用get而不是load。你的情况，你可以这样做：

$.get("/logged-in-content.html #secondHeader", function(data) { 
    $("#secondHeader").replaceWith(data); 
}); 

[编辑：删除一个括号]

更新： 如果/logged-in-content.html已经不仅仅是你需要的代码，您可在将返回的数据封装在另一个jQuery对象中，并使用.find（）来提取容器。 试试这个：

$（ “＃secondHeader”）replaceWith（$（数据）。找到（ “＃secondHeader”））;

Answer 2

你可以在load（）方法中精炼你的选择器吗？

例如，

$("#secondHeader").load("/logged-in-content.html #secondHeader > *"); 

这样，你不抓住DIV本身，你抓住它的内容。

Answer 3

$ .load并不是真正的最佳选择，因为该函数只是用来填充div的内容，正如您所看到的。您可以直接使用$.get，并设置回调函数来替换原始div，或更改logged-in-content.html以排除div。

也知道，作为一个基于JavaScript的解决方案，如果用户查看源代码，他们会看到，他们可以得到访问由刚刚在他们的地址栏中键入它登录-content.html如果您其他方面没有保护它。

Answer 4

在插入它之前，您想要用div封装。

​​

Answer 5

你可以在你的“secondHeader”div上添加一个容器DIV吗？那么你会使用：

$('#secondHeaderContainer').load('/logged-in-content.html #secondHeader'); 

Answer 6

为我工作最好的另一种方式：

$('#div_to_replace').load('/ajax/loader', function() { 
    $(this).children(':first').unwrap(); 
}); 

Answer 7

最终的答案：

$.fn.loadWith = function(u){var c=$(this);$.get(u,function(d){c.replaceWith(d);});}; 
$("#test").loadWith("somelink.html"); 

jQuery的load元素添加到选择的元素的响应。 jQuery的replaceWith替换选定的元素。

<div id="curElement">start</div> 

$("#curElement").load("somelink.html"); 
will result in: 
<div id="curElement">What ever was in somelink.html</div> 


$("#curElement").replaceWith("somelink.html"); 
will result in: 
What ever was in somelink.html 

我建议加入到jQuery的一个函数，做两件事：

$.fn.loadWith = function(u){ 
    var c=$(this); 
    $.get(u,function(d){ 
     c.replaceWith(d); 
    }); 
}; 
$("#test").loadWith("somelink.html"); 

Answer 8

我一直有这样定义的jQuery函数：

jQuery.fn.loadOuter = function(url, callback) 
    { 
     var toLoad = $(this); 
     $.get(url, function(data) { 
      toLoad.replaceWith(data); 
      if (callback != null && callback != undefined) 
       callback(); 
     }); 
    } 

那么我可以说

$(...).load(url) 

或

$(...).loadOuter(url) 

第二个是做你想做的。我也有一个名为loadInner的函数，它只是调用load来表示它的价值。

Answer 9

var target = '#secondHeader'; 
var pathname = '/logged-in-content.html'; 
var source = pathname + ' ' + target; 
var temp = jQuery('<div></div>'); 
temp.load(source, function() { 
jQuery(target).replaceWith(temp.contents()); 
}); 

或功能

$.fn.replaceWithRemote = function(source, callback) { 
    var target = $(this); 
    var temp = $('<div></div>'); 
    temp.load(source, function() { 
     target.replaceWith(temp.contents()); 
     if (callback != null){ 
      callback(); 
     } 
    }); 
} 

$('#secondHeader').replaceWithRemote('/logged-in-content.html #secondHeader'); 

Answer 10

已加载的内容后，发现其子#second和解开它。

$("#secondHeader").children().unwrap(); 

Answer 11

我有这个问题为好，但我可以重新编写代码，像这样使用.load：（玉）

div#view 
    div.content 
     block content 

和像这样的脚本...

$("#view").load($(this).attr("href") + " div.content") 

所以定位孩子而不是相同的标签。

Answer 12

使用$获得（）为我工作，但我不得不从响应文件先解压容器：

$.get("/page.html", function (data) { 
    var elem = $(data).find('#container'); 
    $("#puthere").replaceWith(elem); 
});