将每 3 个 div 包装在一个 div 中
Posted
技术标签:
【中文标题】将每 3 个 div 包装在一个 div 中【英文标题】:Wrap every 3 divs in a div 【发布时间】:2011-03-22 22:41:46 【问题描述】:是否可以使用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>
【问题讨论】:
gist.github.com/3181731 一个很好的 jQuery 插件可以做到这一点。希望你会发现它有用。 【参考方案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>");
You can try out a demo here,我们在这里所做的就是获取要包装的元素并循环遍历它们,分批执行.wrapAll()
,然后移至下一个 3,依此类推。它将包装 3时间,但是最后还剩下很多,例如3, 3, 3, 2 如果是这样的话。
【讨论】:
我会把它变成一个函数,并将包装的 div 的数量作为参数。像 applyDivGrouping(divs, divsPerGroup); 哇!感谢您的及时回复。几件事......所以,只是为了澄清 - 这不可能使用 nth-child 吗? &.. 作为一个完整的 jQuery 新手 - 我如何让它发挥作用?我是否将其包装在 jQuery(function($)...中?非常感谢 @csbourne - 不,:nth-child()
不适合这个,至于调用它,如果你想在document.ready
上运行它,只需将它包装在$(function() );
中,否则当你想运行它时调用它:)
我们如何使用特定的类分割和包装 div
@Fahad ,按照 NickCraver 的逻辑,您可以简单地编辑一小段代码 var divs = $("div > .classname");
或 var divs = $("div .classname");
谢谢【参考方案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>
【讨论】:
【参考方案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" />
,带有一个类和结束标记。 *** 阻止我展示它的样子,但这里是一个自关闭 div 的链接。
应该是什么样子
这将包装您指定的所有其他数字。我正在使用 jquery 1.8.2。所以请记住每次都使用选择器调用EveryWhat(3)
和一个数字。当然是放在页面底部或者包裹在一个
$(document).ready(function()
//place above code here
);
您可以每隔 n 次使用一次,然后使用.wrapInner('<div class="new" />')
来获得相同的结果。
【讨论】:
您已经可以使用$('div > div:nth-child(3n)')
执行此操作,并且实际上不会产生两组三个元素。【参考方案4】:
这是上面尼克的一个更有用的版本:
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');
包装器名称的第二个参数是可选的。
【讨论】:
【参考方案5】:$(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');
第一个参数是要包装在一起的元素数量,第二个参数是要包装的元素类型。
您可以在变量wrapClass
下的main函数中更改包装元素的类。
【讨论】:
【参考方案6】:我已经为另一个与这个问题重复的问题准备了这个答案。所以也许我的变体对某些人有用:
我认为包装所有三个元素的解决方案是:
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/
【讨论】:
以上是关于将每 3 个 div 包装在一个 div 中的主要内容,如果未能解决你的问题,请参考以下文章