1

我正在通过 jQuery $.ajax() 方法从远程源加载一些 html。

在将 html 插入 DOM 之前,我想将它分成三部分并将每个单独的部分插入到我的 DOM 的特定区域中。

例如,假设我通过 $.ajax() 函数加载以下内容:

<div class='first'>First</div>
<div class='second'>Second</div>
<div class='third'>Third</div>

并希望将其插入到连接到 DOM 的此页面中:

<div class='firstHome'>Some content I want replaced.</div>
<div class='secondHome'>More content to replace.</div>
<div class='thirdHome'>Final location for content.</div>

这将导致:

<div class='firstHome'><div class='first'>First</div></div>
<div class='secondHome'><div class='second'>Second</div></div>
<div class='thirdHome'><div class='third'>Third</div></div>

如何使用 jQuery 实现这一点?

4

2 回答 2

2

从返回的 html 中选择内容并附加它。

var $frag = $(returnedhtml);

$(".firstHome").html($frag.find(".first").addBack(".first"));
$(".secondHome").html($frag.find(".second").addBack(".second"));
$(".thirdHome").html($frag.find(".third").addBack(".third"));

上面的代码只适用于 jQuery 1.9+,对于以前的版本,使用这个:

var $frag = $(returnedhtml);

$(".firstHome").html($frag.find(".first").andSelf().filter(".first"));
$(".secondHome").html($frag.find(".second").andSelf().filter(".second"));
$(".thirdHome").html($frag.find(".third").andSelf().filter(".third"));
于 2013-01-15T21:38:31.920 回答
1

一个简单的each()循环应该可以完成工作:

$(yourContent).each(function() {
    $("." + this.className + "Home").empty().append(this);
});
于 2013-01-15T21:40:32.550 回答