如何动态分组每个n-div并用JQuery中的新div包装？

Question

如何动态分组每个n-div并用JQuery中的新div包装？

我想选择每4个div class "contents"并将其包装在另一个动态创建的新div中Jquery.我的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>

Run Code Online (Sandbox Code Playgroud)

我想要

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

Run Code Online (Sandbox Code Playgroud)

我目前的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);
            };
        }
})();

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sed*_*der 7

您可以使用它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>");
}

Run Code Online (Sandbox Code Playgroud)

看一下这个

http://jsfiddle.net/RQNrt/

我希望这可以提供帮助

归档时间：	12 年，6 月前
查看次数：	2168 次
最近记录：	12 年，6 月前