文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用slice将同一类的每6个div包装在另一个div中？

问如何使用slice将同一类的每6个div包装在另一个div中？
EN

Stack Overflow用户

提问于 2011-11-29 22:17:25

回答 5查看 818关注 0票数 3

下面是我使用的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中，我的错误在哪里？提前谢谢你！

jquery

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-11-29 22:48:11

Here is a fiddle

我们遍历每个带有thumb的div类，它是6的倍数，并选择该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

票数 1

Stack Overflow用户

发布于 2011-11-29 22:27:30

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

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

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

jsFiddle

票数 0

Stack Overflow用户

发布于 2011-11-29 22:29:48

我认为使用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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8312244

复制

相似问题

问如何使用slice将同一类的每6个div包装在另一个div中？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用slice将同一类的每6个div包装在另一个div中？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用slice将同一类的每6个div包装在另一个div中？
EN