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>

我想在div中用.thumb类包装每6个这样的项目

<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

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

从像这样的HTML开始（Zen Coding）：

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

你得到了这个（再次，Zen Coding惯例）：

#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

Answer 2

如果您想单独包装每个div，请使用.wrap():

divs.wrap($('<div class="scrollable"></div>"));

.wrapAll()用于使用单个元素包装整个元素集，而.wrap()则单独作用于集合的每个元素。

jsFiddle

Answer 3

我认为这可能会有一个while循环，下面的解决方案是丑陋的，但我认为它有效 -

var counter = 6;
while (counter <= $("div").length+1) {
    var gtexp = '';
    if (counter > 6) gtexp = ":gt(" + (parseInt(counter) - 7) + ")"
    $("div:lt(" +  counter + ")" + gtexp).wrapAll("<div id='scrollable'></div>");
    counter = counter + 7;          
}

演示 - http://jsfiddle.net/Feqpg/2/

Answer 4

它适合我 - 我使用Chrome

http://jsfiddle.net/manseuk/khRTm/1/

也许让具有相同ID属性的div是问题??

Answer 5

var  tut=0;   
$("div.thumb").each(function () {
//if tut%6==0 u can wrap with
divs.wrap($('<div class="scrollable"></div>"));
//after that tut++;
    });

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

5 个答案: