如何动态分组每个n-divs并在JQuery中包装一个新的div？ [英] how to dynamically group every n-divs and wrap up with a new div in JQuery?
本文介绍了如何动态分组每个n-divs并在JQuery中包装一个新的div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用 classcontents选择每4个div，并将其包装在另一个使用 Jquery 。我的HTML如下所示：
< body>
< div id =张贴>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< / div>
< / body>
我要
<身体GT;
< div id =张贴>
< div id =newDivforWraping1>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< / div>
< div id =newDivforWraping2>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< / div>
< div id =newDivforWraping3>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< div class =contents>< / div>
< / div>
< / div>
< / body>
我目前的JScript代码在下面;
（function（）{
use strict;
$（document）.ready（function（）{
insertdiv（newDivforWraping1，4 ）;
insertdiv（newDivforWraping2，8）;
insertdiv（newDivforWraping3，12）;
}）;
//为每个分组创建div它们分成三个
函数insertdiv（divname，n）{
$（< div />，{class：test，id：divname}）。appendTo（＃postings） ;
var allcontentspost = $（。contents）。each（）;
for（var i = n-4; i< n; i ++）{
allcontentspost [i] .appendTo （＃+ divname）;
};
}
}）（）;
解决方案
您可以使用切片获得数字，然后 wrapAll
var divs = $（。contents）;
for（var i = 0; i< divs.length; i + = 4）{
j = i + 1;
divs.slice（i，i + 4）.wrapAll（< div id ='newDivforWraping+ j +'class ='new'>< / div>）;
}
检查一下
我希望这可以帮助
I want to select every 4 divs with class "contents" and wrap it in another new div that is created dynamically using Jquery. my HTML is as follows;
<body>
<div id="postings">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</body>
I want
<body>
<div id="postings">
<div id="newDivforWraping1">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
<div id="newDivforWraping2">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
<div id="newDivforWraping3">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>
</body>
my current JScript code is below;
(function() {
"use strict";
$(document).ready(function() {
insertdiv("newDivforWraping1",4);
insertdiv("newDivforWraping2",8);
insertdiv("newDivforWraping3",12);
});
//create div for every grouping them into three
function insertdiv(divname,n) {
$("<div/>", {class: "test",id:divname}).appendTo("#postings");
var allcontentspost = $(".contents").each();
for (var i=n-4;i<n;i++) {
allcontentspost[i].appendTo("#"+divname);
};
}
})();
解决方案
You can use the slice to get the numbers and then wrapAll
var divs = $(".contents");
for(var i = 0; i < divs.length; i+=4) {
j = i + 1;
divs.slice(i, i+4).wrapAll("<div id='newDivforWraping"+j+"' class='new'></div>");
}
check this out
I hope this can help
这篇关于如何动态分组每个n-divs并在JQuery中包装一个新的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
