Question

我有div的数量（div的数量是动态的）

例如：

<div> div1 </div>
<div> div2 </div>
<div> div3 </div>
<div> div4 </div>
<div> div5 </div>
<div> div6 </div>
<div> div7 </div>

int上面的div我希望根据div奇数或偶数

的数量包装那些div

在上面的例子中，它的div数是奇数

我希望像这样

<div clss="wrap">
    <div> div1 </div>
    <div> div2 </div>
    <div> div3 </div>
    <div> div4 </div>
</div 

<div clss="wrap">
    <div> div5 </div>
    <div> div6 </div>
    <div> div7 </div>
</div

我创建了以下功能

     var a = $('.vidoes > .box');
     var numItems = $('.box').length

     if (numItems % 2 != 0) {

         alert("odd");
     }


    below code is to wrap div's


     for (var i = 0; i < a.length; i += number) {
     a.slice(i, i + number).wrapAll('<div class="wrap"></div>');
 }

毕竟

如果div的数量是奇数，例如：div的数量7应该在第一次换行中包含4 div而在第二次换行中包含3 div如果div的数量是11则应该在第一次换行中包裹6 div而在第二次换行中换出5 div如果div中的div数应该包裹在两个包中

包裹的数量也可以包裹为3个应该是3个内部包裹和3个内部第二个包裹和1个内部最后包裹

Answer 1

您可以使用.slice()方法：

var $a = $('.vidoes > .box'), 
    $f = $a.slice(0, Math.ceil($a.length / 2))
           .wrapAll('<div class="videoswraper"/>');

$a.not($f).wrapAll('<div class="videoswraper"/>');

编辑：要使用包装元素包装每组3个元素，您可以while循环：

while ( $('.vidoes > .box').length ) {
   $('.vidoes > .box').slice(0, 3).wrapAll('<div class="videoswraper">')
}

请注意，包装元素不应该有box className，否则会发生不好的事情。

http://jsfiddle.net/PzeHg/

Answer 2

Fiddle Demo

var div_all = $('#container div'), //cache sector for all div's
    num = Math.round(div_all.length / 2); //get 1/2 count of div and round it
div_all.slice(0, num).wrapAll('<div class ="wrap"/>');//wrapAll div's from 0 to num
div_all.slice(num).wrapAll('<div class ="wrap"/>'); //wrapAll rest of div's

<强> HTML

<div id="container">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
</div>

<小时/> .wrapAll()

.slice(begin[, end])

Math.round()

根据奇数或偶数包装div的数量

2 个答案: