jquery - 如何使用切片将同一类的每 6 个 div 包装在另一个 div 中？

Question

我使用的 div 示例:

<div id="slider">
    <div class="thumb" id="ipsc-thumb" >
        <a href="#featured"><img src="images/thumbs/ipsc-bwthumb.jpg" alt="" /></a>
    </div>
    <div class="thumb" id="ipsc-thumb" >
        <a href="#featured"><img src="images/thumbs/ipsc-bwthumb.jpg" alt="" /></a>
    </div>
    <div class="thumb" id="ipsc-thumb" >
        <a href="#featured"><img src="images/thumbs/ipsc-bwthumb.jpg" alt="" /></a>
    </div>
</div>

我想用 .thumb 类将其中每 6 个项目包装在一个 div 中

<div class="scrollable"></div>

到目前为止我写了这个:

var divs = $("div.thumb");
for(var i = 0; i < divs.length; i+=6) {
    divs.slice(i, i+6).wrapAll("<div class='scrollable'></div>");
}

它没有将它们包装在任何 div 中，我的错误在哪里？预先非常感谢!

Answer 1

Here is a fiddle

我们使用 6 的倍数的 thumb 类迭代每个 div 并选择该 div 之前的所有元素。这六个元素通过 .scrollable 类包装在 div 中。

从这样的 HTML 开始(Zen 编码):

#slider
  (.thumb > ...) * 13

你得到这个(再次，Zen 编码约定):

#slider
  .scrollable
    (.thumb > ...) * 6
  .scrollable
    (.thumb > ...) * 6
  .thumb

jQuery 代码:

$('.thumb:nth-child(6n)').each(function(index) {
    $(this).prevAll('.thumb').andSelf().wrapAll('<div class="scrollable" />');
});

编辑:如果您需要包装剩余的 div，请在末尾添加此行代码:

$('#slider > .thumb').wrapAll('<div class="scrollable" />');

Fiddle with updated code