2013-01-15 105 views
1

我通過jQuery $ .ajax()方法從遠程源加載一些html。jQuery:砍掉ajax的HTML然後將它注入DOM

在將html插入到DOM之前,我想將它分成三部分,並將每個單獨的部分插入到DOM的特定區域。

例如,讓我們假設我加載通過$阿賈克斯()函數以下內容:

<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實現?

回答

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")); 
1

一個簡單each()循環應該把工作做好:

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