如何在多个相同类别的元素中包装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>

- Nathan Alette

---

与meder相同。您尝试使用的函数无法“猜测”您想要做什么，否则会产生太多开销，并使函数变得不切实际。 - Yanick Rochon

我同意，JavaScript不应该用于进行如此重大的更改。然而，我使用的软件不允许您编辑对设置的任何更改，因此我只能使用jQuery。 - Nathan Alette

Answer 1

您可以使用for循环快速遍历<div>元素。在下面的代码中，只需更改此处的初始选择器以获取所有兄弟divs，例如#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()操作。包装完成后，我们跳过该循环中的那么多元素。

- Nick Craver

Answer 2

我刚刚想出了一个简单的自定义解决方案。

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);
}

- Adam

Answer 3

你可以将新的

附加到你的标记中，然后将你想要包装的内容附加到其中。如果你的标记是这样的：

<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

- zgreen