我如何使用jQuery.load来替换包括div的div

Question

我有一个id为"secondHeader"的div,我想用另一个具有相同id"secondHeader"的div替换整个div,但不是替换它,而是将加载的div添加到第一个div中.

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

这就是发生的事情......

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

我想要发生的是从ajax加载的secondHeader div到完全替换初始页面中的secondHeader.

我知道这听起来很愚蠢,但这就是我想要完成的事情......当用户没有登录时,他们会看到未登录的标题.我正在使用ajax允许此人登录该站点,我想通过ajax将登录的一个替换为未登录的头.

我已经尝试过我所知道的一切,比如......

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

...并在手前使用.remove()...

有任何想法吗？

Answer 1

你能在load()方法中改进你的选择器吗？

例如,

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

这样,你就不会抓住div本身,而是抓住它的内容.

Answer 2

我认为最好的方法是使用get而不是load.在你的情况下你可以这样做:

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

[编辑:删除了一个paren]

更新:如果/logged-in-content.html不仅仅包含您需要的代码,您可以将返回的数据包装在另一个jQuery对象中,并使用.find()来提取容器.试试这个:

$( "#secondHeader")replaceWith($(数据).find( "#secondHeader"));

Answer 3

另一种最适合我的方式:

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

Answer 4

最终答案:

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

jQuery load将响应INTO添加到所选元素中.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 5

使用$ .get()为我工作,但我必须首先从响应文档中提取容器:

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