gpt4 book ai didi

javascript - 如何动态分组每个 n-div 并在 JQuery 中用一个新的 div 包装?

转载 作者:太空宇宙 更新时间:2023-11-04 13:54:24 24 4
gpt4 key购买 nike

我想用 class "contents" 选择每 4 个 div,并将其包装在另一个使用 Jquery 动态创建的新 div 中。我的 HTML 如下;

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

我要

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

我当前的 JScript 代码如下;

(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);
};
}
})();

最佳答案

您可以使用 slice 获取数字,然后使用 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>");
}

看看这个

http://jsfiddle.net/RQNrt/

希望对你有帮助

关于javascript - 如何动态分组每个 n-div 并在 JQuery 中用一个新的 div 包装?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17938325/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com