我有一个 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()...
有什么想法吗？
你能在 load() 方法中改进你的选择器吗？
例如，
$("#secondHeader").load("/logged-in-content.html #secondHeader > *");
这样，您就不会抓取 div 本身，而是抓取其内容。
我认为最好的方法是使用 get 而不是 load。对于你的情况，你可以这样做：
$.get("/logged-in-content.html #secondHeader", function(data) {
$("#secondHeader").replaceWith(data);
});
[编辑：删除括号]
更新： 如果 /logged-in-content.html 不仅仅包含您需要的代码，您可以将返回的数据包装在另一个 jQuery 对象中，并使用 .find() 提取容器。 试试这个：
$("#secondHeader").replaceWith($(data).find("#secondHeader"));
另一种最适合我的方法：
$('#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 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");
使用 $.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。
$.load 并不是真正的最佳选择，因为正如您所见，该函数的目的只是填充 div 的内容。 您可以只使用 $.get 并设置回调函数来替换原始 div，或更改logged-in-content.html 以排除该 div。
另请注意，作为基于 Javascript 的解决方案，如果您的用户查看源代码，他们会发现只需在地址栏中输入登录的内容.html（如果您不这样做）即可访问该内容以其他方式保护它。
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');
加载内容后，找到其子项
#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');
我也有同样的问题。我的解决方案对我有用，我在其中嵌入了一个子 div 并更新了子 div：
HTML：
<div id="secondHeader">
<div id="secondHeaderChild">
What currently is in secondHeader goes here....
</div>
</div>
阿贾克斯：
$("#secondHeader").replaceWith($("#secondHeader").load("/logged-in-content.html
#secondHeaderChild"));
var tempEl = jQuery('<div></div>');
tempEl.load(url, function() {
var html = tempEl[0].innerHTML;
el.replaceWith(html);
});
.load
，如下所示：（jade）
div#view
div.content
block content
脚本就像这样...
$("#view").load( $(this).attr("href") + " div.content" )
因此，请以子级为目标，而不是相同的标签。