如何從多個HTML元素的特定開始和結束點使用jQuery .wrap（）？

我想使用jQuery .wrap（）函數來從特定的開始和結束點圍繞一系列html標記來包裝div。例如，這裏是我的HTML文件看起來像現在：如何從多個HTML元素的特定開始和結束點使用jQuery .wrap（）？

我目前的HTML結構：

<div class="single-post"> 
    <img src="" /> 
    <p></p> 
    <p></p> 
    <blockquote></blockquote> 
    <p></p> 
</div>

我想換一個div一類的「新」，圍繞從上面這些元素：

<p></p> 
<p></p> 
<blockquote></blockquote> 
<p></p>

實際上，這是我的最終結果應該是什麼樣子：

<div class="single-post"> 
    <img src="" /> 
    <div class="new"> 
     <p></p> 
     <p></p> 
     <blockquote></blockquote> 
     <p></p> 
    </div> 
</div>

來源

2013-01-22 Matt

不知答案使用元素也可以使用第二個參數指定終點排除與指示起點和終點的問題標題不匹配。 –

好吧，假設IMG始終是一個獨行俠，你可以不喜歡this：

的jQuery：

$('.single-post > img').siblings().wrapAll('<div class="new" />');

你也可以這樣做this：

$('.single-post').children(':not(.exclude)').wrapAll('<div class="new" />');

來源

2013-01-22 07:32:22 Joonas

我實際上在我原來的問題上犯了一個錯誤，只是糾正了它。那麼包裝上述html元素集呢？ – Matt

@布萊恩編輯我的答案。 – Joonas

出於好奇，我決定測試這3個代碼如何相互對抗：http://jsperf.com/wrapall-except-img - http://jsperf.com/wrapall-except-img-2 – Joonas

如果第一胎內應始終跳過<div class="single-post">：

$('.single-post') 
    .children() 
    .slice(1) 
    .wrapAll('<div class="new" />');

這裏，.slice()的第一個參數表示起點（第二個元素）。

.slice(1, 4) // will select elements 2 and 3

起點和終點可以是負數意味着從最終

參見位置：jQuery.slice()

來源

2013-01-22 08:01:38

如何從多個HTML元素的特定開始和結束點使用jQuery .wrap（）？

回答

相關問題