每隔3格包裹一个div
是否有可能使用nth-child选择器使用.wrapAll包装3个div？ 我似乎无法找出正确的方程。
所以…
<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>
你可以用.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。
我写了一个通用的块函数，这使得这很容易做到：
$.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>
插件
$(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)使用选择器调用EveryWhat(3)和一个数字。 当然，把它放在页面的底部或包装在一个
$(document).ready(function() { //place above code here });
你可以使用每一个nth然后.wrapInner('<div class="new" />')来获得相同的结果。
这是一个更可用的尼克上面的版本：
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');
包装名称的第二个参数是可选的。
$(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 = [] } }); } } });
我把凯尔的插件的想法，并扩大到自动包装，并采取两个论据。 这对我来说并不奏效，但是我通过对代码进行了一些修改和补充来实现它。
要调用该函数，只需使用您想要包装的父元素，然后按如下所示设置您的参数。
$('#container').WrapThis(5, 'li');
第一个参数是要包装多少个元素，第二个参数是要包装的元素类型。
您可以在变量wrapClass下的主函数中更改wrapping元素的类。
我已经准备好了这个答案，是另外一个重复的问题。 所以也许我的变种将是有用的一些：
我认为解决所有三个元素是：
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/
