javascript - 如何将 div 包裹在多个相同类的元素周围

Question

我试图将多个相同类的 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>

Answer 1

您可以快速循环遍历 <div>使用 for 的元素环形。在下面的代码中，只需更改此处的初始选择器即可获取所有这些兄弟 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;
}​

You can give it a try here .我们只是循环，.entry <div>元素使用 .nextUntil() 获得所有 .entry元素，直到有一个非 .entry一个使用 :not() selector .然后我们采用下一个元素，加上我们开始的元素( .andSelf() )并做一个 .wrapAll() 。在那个组上。在它们被包装之后，我们将跳过循环中的许多元素。