[英]How to wrap div around multiple of the same class elements
我試圖將多個相同類的 div 包裝到一個 div 中,並跳過不屬於同一個類的 div。 .wrap 不會將它們組合起來,而 .wrapAll 會在下面拋出未分類的 div。 我一直在嘗試創建替代解決方案,但無濟於事。
原來的:
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div>Skip in wrap</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
continued...
想要的結果:
<div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
</div>
<div>Skip in wrap</div>
<div>
<div class="entry">Content</div>
<div class="entry">Content</div>
<div class="entry">Content</div>
</div>
您可以使用for
循環快速遍歷<div>
元素。 在下面的代碼中,只需更改此處的初始選擇器即可獲取所有兄弟 div,例如#content > div.entry
或它們所在的任何位置:
var divs = $("div.entry");
for(var i=0; i<divs.length;) {
i += divs.eq(i).nextUntil(':not(.entry)').andSelf().wrapAll('<div />').length;
}
你可以在這里試一試。 我們只是循環遍歷.entry
<div>
元素,使用.nextUntil()
獲取所有.entry
元素,直到有一個非.entry
元素使用:not()
選擇器。 然后我們將接下來的元素,加上我們開始的元素 ( .andSelf()
) 並在該組上執行.wrapAll()
。 在它們被包裝之后,我們將跳過循環中的許多元素。
我剛剛提出了一個簡單的自定義解決方案。
var i, wrap, wrap_number = 0;
$('div').each(function(){ //group entries into blocks "entry_wrap_#"
var div = $(this);
if (div.is('.entry')) {
wrap = 'entry_wrap_' + wrap_number;
div.addClass(wrap);
} else {
wrap_number++;
}
});
for (i = 0; i <= wrap_number; i++) { //wrap all blocks and remove class
wrap = 'entry_wrap_' + i;
$('.' + wrap).wrapAll('<div class="wrap"/>').removeClass(wrap);
}
您也可以將新的 div 附加到您的標記中,然后將您想要包裝的內容附加到這些 div 中。
如果您的標記是這樣的:
<div class="wrap">
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
使用以下內容附加兩個新的 div(第一column-one
和第二column-two
),然后將適當的內容附加到這些 div 中:
// Set vars for column content
var colOne = $('.col-1').nextUntil('.col-2').addBack();
var colTwo = $('.col-2').nextAll().addBack();
// Append new divs that will take the column content
$('.wrap').append('<div class="column-first group" /><div class="column-second ground" />');
// Append column content to new divs
$(colOne).appendTo('.column-first');
$(colTwo).appendTo('.column-second');
演示在這里: http : //codepen.io/zgreen/pen/FKvLH
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.