87

是否可以使用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>
4

6 回答 6

183

你可以这样做.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 如果是这样的话。

于 2010-07-29T20:10:45.647 回答
23

我编写了一个通用的块函数，这使得这很容易做到：

$.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>

于 2015-06-22T04:54:34.563 回答
8

插件

$(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" />')获得相同的结果。

于 2012-11-07T22:26:57.133 回答
7

这是上面尼克的一个更有用的版本：

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');

window 应该替换为您的 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');

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

于 2013-10-18T01:35:01.643 回答
1 
$(function() {
    $.fn.WrapThis = function(arg1, arg2) { /*=Takes 2 arguments, arg1 is how many elements to wrap together, arg2 is the element to wrap*/

        var wrapClass = "column"; //=Set class name for wrapping element

        var itemLength = $(this).find(arg2).length; //=Get the total length of elements
        var remainder = itemLength%arg1; //=Calculate the remainder for the last array
        var lastArray = itemLength - remainder; //=Calculate where the last array should begin

        var arr = [];

        if($.isNumeric(arg1))
        {
            $(this).find(arg2).each(function(idx, item) {
                var newNum = idx + 1;

                if(newNum%arg1 !== 0 && newNum <= lastArray){
                    arr.push(item);
                }
                else if(newNum%arg1 == 0 && newNum <= lastArray) {
                    arr.push(item);
                    var column = $(this).pushStack(arr);
                    column.wrapAll('<div class="' + wrapClass + '"/>'); //=If the array reaches arg1 setting then wrap the array in a column
                    arr = [];
                }
                else if(newNum > lastArray && newNum !== itemLength){ //=If newNum is greater than the lastArray setting then start new array of elements
                    arr.push(item);
                }
                else { //=If newNum is greater than the length of all the elements then wrap the remainder of elements in a column
                    arr.push(item);
                    var column = $(this).pushStack(arr);
                    column.wrapAll('<div class="' + wrapClass + '"/>');
                    arr = []
                }
            });
        }
    }
});

我采用了 Kyle 的插件想法并将其扩展为自动换行并接受两个参数。一开始它对我不起作用，但我通过对代码进行了一些编辑和添加来运行它。

要调用该函数，只需使用要包装的父元素，然后按如下方式设置参数。

$('#container').WrapThis(5, 'li');

第一个参数是要包装在一起的元素数量，第二个参数是要包装的元素类型。

您可以在变量下的 main 函数中更改包装元素的类wrapClass。

于 2013-11-07T02:54:38.290 回答
0

我已经为另一个与这个重复的问题准备了这个答案。所以也许我的变体对某些人有用：

我认为包装所有三个元素的解决方案是：

var $lines = $('.w-col'), // All Dom elelements with class .w-col
     holder = []; //Collect DOM elelements

$lines.each(function (i, item) {
  holder.push(item);

  if (holder.length === 3) {
    $(holder).wrapAll('<div class="w-row" />');
    holder.length  = 0;
  }
});

$(holder).wrapAll('<div class="w-row" />'); //Wrap last elements with div(class=w-row)

我在 jsbin 编写了相同的代码，并进行了一些改进http://jsbin.com/necozu/17/或http://jsbin.com/necozu/16/

于 2015-01-22T12:09:34.680 回答