Question

我通过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实现这一目标？

Answer 1

从返回的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"));

Answer 2

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

$(yourContent).each(function() {
    $("." + this.className + "Home").empty().append(this);
});

jQuery：填充ajax的HTML然后将其注入DOM

2 个答案: