使用$。替换HTML中的一个div

我正在运行jQuery ajax方法，并在succcess（.done）我想加载一些HTML，以便用户获得他们的个人资料上的一些更新的数字。

我试图取代看起来像这样的HTML，

<div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div>

为了这个我做以下，

$("#large_buttons").load(site_url+"my_profile #large_buttons");

然而，这只是创建下列HTML，

<div id="large_buttons"><div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div></div>

我想要加载我的新HTML完全覆盖现有的#large_buttons div

是这个possibe？

2012-03-16 Udders

你可以发布你有什么，你想实现什么？ – kgr 2012-03-16 23:33:54

这正是我有什么，我想要实现的，我想从另一个URL加载#large_buttons并覆盖现有的#large_buttons – Udders 2012-03-16 23:35:25

好吧，对不起，我误解了你的问题，这不是很清楚... – kgr 2012-03-16 23:36:25

.load() method（正如您所见）直接将响应加载到指定的元素中，因此一种解决方案是将您的服务器端代码更改为仅输出没有#large_buttons div本身的内容。

另一个解决办法是使用其他Ajax methods之一，例如，.get() method，并准确地把返回的HTML，你想从成功处理程序中：

$.get(site_url+"my_profile", function(data) { 
    $("#large_buttons").replaceWith(data); 
},'html');

（理论上你做” t需要最后一个参数来表示数据类型，因为jQuery做了一个“智能猜测”，但是明确地告诉它你期待的是html）

确实听起来像是它应该做的。

编辑：我刚刚注意到（正如乔恩指出的那样），您正在使用的语法，其中包含选择器，以便使用返回的HTML的哪一部分，因此您可以简单地修改该选择器以获取元素在属于#large_buttons格内响应：

$("#large_buttons").load(site_url+"my_profile #large_buttons > *");

应与其中的div只包含其他元素，而不是文本节点的样本HTML工作。

2012-03-16 23:38:04 nnnnnn

AFAIK'$ .get'没有响应'＃large_buttons'部分，所以这种方法也需要服务器端的修改。 – Jon 2012-03-16 23:43:49

谢谢@Jon，是的，我刚刚注意到了这一点。但根据我的编辑，这可能意味着对传递给'.load（）'的选择器进行小小的调整将会做出诀窍，而不会做任何其他更改。 – nnnnnn 2012-03-16 23:50:31

+1，这也是一个有趣的方法（尽管我不喜欢用'.load'的过滤来坦白任何方法）。 – Jon 2012-03-17 00:00:55

如果我理解正确，您想用从服务器获得的新版本替换div#large_buttons。 JQuery的replaceWith()方法应该可以做到。

2012-03-16 23:38:30 Carsten

如果你想改变的最少的现有代码，那么最简单的将包裹#large_buttons另一个元素（其中，这将是一个唯一的孩子），并简单地对一个使用.load内。

你不会需要做，如果你没收.load，并与更多的基本功能了像$.get，例如：

$.get(large_buttons_url, function(data) { 
    $("#large_buttons").replaceWith(data); 
});

...但随后就失去了自动过滤DOM是.load可以做（你不能再追加#large_buttons到URL），所以你必须确保AJAX请求只有返回你感兴趣的HTML片段。

就个人而言，这是我会做的，因为听起来并不是很好，但是取出整个页面并丢弃它的一部分;但是，这将需要您修改比替代选项更多的代码。

2012-03-16 23:38:40 Jon

这是正确的答案。加载替换选定元素的*内容*。您可能需要在包装div上使用加载，或者更改要加载的div的结构。 – 2012-03-16 23:44:23

使用AJAX您的任何股利加载一些内容，你可以使用jQuery load功能

$("#large_buttons").load("url_which_Returns_html.php",function(data){ 
    alert("Items loaded"); 
});

这将加载的内容（覆盖现有内容）从PHP页面返回到div id为“large_buttons”

如果你想有一个purticular DIV之后加载数据，你可以这样做

$.get("url_which_returns_html.php",function(data){ 
    ('#right').after(data); 
});

这将加载从PHP响应页面后与ID为“右”的分区

2012-03-16 23:40:57 Shyju

回答