在div中包含每3个div

Question

是否可以使用nth-child选择器来包装3个div .wrapAll？我似乎无法弄清楚正确的等式.

所以...

<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

成为...

<div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
   <div class="new">
        <div></div>
        <div></div>
        <div></div>
   </div>
</div>

Answer 1

你可以这样做.slice(),像这样:

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

你可以在这里尝试一个演示,我们在这里所做的就是获得你想要包装和循环遍历它们的元素.wrapAll(),分批进行3个然后移动到下一个3等等.它将一次包装3个然而,如果是这样的话,很多都留在最后,例如3,3,3,2.

Answer 2

我写了一个通用的块函数,这使得这很容易做到:

$.fn.chunk = function(size) {
    var arr = [];
    for (var i = 0; i < this.length; i += size) {
        arr.push(this.slice(i, i + size));
    }
    return this.pushStack(arr, "chunk", size);
}

$("div > div").chunk(3).wrap('<div class="new"></div>');

$.fn.chunk = function(size) {
  var arr = [];
  for (var i = 0; i < this.length; i += size) {
    arr.push(this.slice(i, i + size));
  }
  return this.pushStack(arr, "chunk", size);
}

$("div > div").chunk(3).wrap('<div class="new"></div>');

div > div {
  width: 50px;
  height: 50px;
  background: blue;
  margin: 2px;
  float: left;
}

div.new {
  background: red;
  height: auto;
  width: auto;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

Answer 3

插件

$(function() {
    $.fn.EveryWhat = function(arg1) {
        var arr = [];
        if($.isNumeric(arg1)) {
            $.each(this, function(idx, item) {
                var newNum = idx + 1;
                if(newNum%arg1 == 0)
                arr.push(item);
            });
        }
        return this.pushStack(arr, "EveryWhat", "");
    }
});

如何使用它.

调用EveryWhat()元素并为要收集的每个元素输入一个数字.

$("div").EveryWhat(2).wrapInner('<div class="new" />');

wrapinner的引号应该有一个正确格式化<div class="new" />的类和结束标记.Stackoverflow阻止我显示看起来像什么,但这里是一个自我关闭div的链接.

应该是什么样的

这将包装您指定的每个其他数字.我正在使用jquery 1.8.2.所以请记住EveryWhat(3)每次使用选择器调用和数字.当然把它放在页面的底部或包装在一个

$(document).ready(function() {  
    //place above code here
});

您可以使用每个n,然后.wrapInner('<div class="new" />')使用相同的结果.

Answer 4

以下是Nick的更实用版本:

window.WrapMatch = function(sel, count, className){
  for(var i = 0; i < sel.length; i+=count) {
    sel.slice(i, i+count).wrapAll('<div class="'+className+'" />');
  }
}

你可以这样使用:

var ele = $('#menu > ul > li'); 
window.WrapMatch(ele, 5, 'new-class-name');

当然,窗口应该替换为Handlers命名空间.

更新:利用jQuery的更好的版本

(function($){
  $.fn.wrapMatch = function(count, className) {
    var length = this.length;
    for(var i = 0; i < length ; i+=count) {
      this.slice(i, i+count).wrapAll('<div '+((typeof className == 'string')?'class="'+className+'"':'')+'/>');
    }
    return this;
  }; 
})(jQuery);

使用如下:

$('.list-parent li').wrapMatch(5,'newclass');

包装器名称的第二个参数是可选的.