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);
});

Answer 6

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

另请注意，作为基于Javascript的解决方案，如果您的用户查看来源，他们会看到只要在地址栏中键入内容，他们就可以访问logged-in-content.html再也不以某种方式保护它了。

Answer 7

我总是有一个像这样定义的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 8

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 9

加载内容后，找到其子项#second并打开它。

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

Answer 10

你想在插入之前包装div。

$.ajax({
    url: "/logged-in-content.html",
    success: function(response){
        var loadedheader = $("<div/>").append(
        response.replace(/<script(.|\s)*?\/script>/g, "")
        ).find('#secondHeader > *').html();
        $("#secondHeader").append(loadedheader);
    }
});

Answer 11

你可以在“secondHeader”div周围添加一个容器DIV吗？然后你会用：

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

Answer 12

我有同样的问题。对我有用的解决方案是，我在其中嵌入了一个子div并更新了该子div：

HTML：

<div id="secondHeader">
  <div id="secondHeaderChild">
     What currently is in secondHeader goes here....
  </div>
</div>

Ajax：

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

Answer 13

我也有这个问题，但我可以通过重构代码来使用.load :( jade）

div#view
   div.content
      block content

和脚本一样......

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

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

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

13 个答案: