我如何使用jQuery.load来replace包括div的div
我有一个ID为“secondHeader”的div，我想用另一个divreplace整个div，使用相同的“secondHeader”标识，但不是replace它，而只是将加载的div添加到第一个div中。
$("#secondHeader").load("/logged-in-content.html #secondHeader"); 这是发生了什么…
<div id="secondHeader"><div id="secondHeader"></div></div>
我想要发生的是来自ajax负载的第二个head div，完全取代了初始页面中的secondHeader。
我知道这听起来很愚蠢，但这就是我想要完成的…当用户没有login，他们看到一个未login的头。 我正在使用ajax允许人login到网站，我想通过ajaxreplace未login的头与login。
我已经尝试了我所知道的一切，比如…
$("#secondHeader").replaceWith($("#secondHeader").load("/logged-in-content.html #secondHeader"));
…之前使用.remove（）…
有任何想法吗？
我认为最好的方法是使用get而不是load。 在你的情况下，你可以这样做：
$.get("/logged-in-content.html #secondHeader", function(data) { $("#secondHeader").replaceWith(data); });
[编辑：删除paren]
更新：如果/logged-in-content.html不仅仅是你需要的代码，你可以将返回的数据包装在另一个jQuery对象中，并使用.find（）来提取容器。 尝试这个：
$（ “＃secondHeader”）replaceWith（$（数据）.find（ “＃secondHeader”））;
你可以在load（）方法中细化select器吗？
例如，
$("#secondHeader").load("/logged-in-content.html #secondHeader > *");
这样，你不是抓住div，而是抓住它的内容。
另一种最适合我的方式是：
$('#div_to_replace').load('/ajax/loader', function() { $(this).children(':first').unwrap(); });
最终答案：
$.fn.loadWith = function(u){var c=$(this);$.get(u,function(d){c.replaceWith(d);});}; $("#test").loadWith("somelink.html");
jQuery 负载将响应INTO添加到所选元素中。 jQuery的replaceWithreplace选定的元素。
<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
我build议添加一个函数jQuery，这两个：
$.fn.loadWith = function(u){ var c=$(this); $.get(u,function(d){ c.replaceWith(d); }); }; $("#test").loadWith("somelink.html");
$ .load在这里并不是最好的select，因为这个函数只是用来填充div的内容，正如你所看到的。 您可以直接使用$ .get，并设置callback函数来replace您的原始div，或更改logged-in-content.html以排除div。
另外请注意，作为一个基于Javascript的解决scheme，如果您的用户查看源代码，他们将会看到，如果您不安全，只需在地址栏中input即可访问logged-in-content.html不知何故。
使用$ .get（）为我工作，但我必须首先从响应文件中提取容器：
$.get("/page.html", function (data) { var elem = $(data).find('#container'); $("#puthere").replaceWith(elem); });
我总是有一个像这样定义的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的值。
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()); });
或作为function
$.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');
加载内容后，find它的子#second并打开它。
$("#secondHeader").children().unwrap();
在插入之前，你想要用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); } });
你可以在你的“secondHeader”div上添加一个容器DIV吗？ 那么你会使用：
$('#secondHeaderContainer').load('/logged-in-content.html #secondHeader');
我也有这个问题，但我可以通过重构代码来使用.load （jade）
div#view div.content block content
和这样的脚本…
$("#view").load( $(this).attr("href") + " div.content" )
所以定位孩子而不是相同的标签。
