jQuery包装div中的每个X元素

Question

我有一个由H3标签预先列出的元素(div)列表

<h3></h3>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<h3></h3>
<div class="item"></div>
<div class="item"></div>

等等...

使用jQuery,我想分组每3个div(或更少),然后每个h3,如下所示:

<h3></h3>
<div class=row>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class=row>
    <div class="item"></div>
</div>
<h3></h3>
<div class=row>
    <div class="item"></div>
    <div class="item"></div>
</div>

我尝试了这里提出的解决方案:使用Javascript为每5个元素插入<div>, 但它显然将所有div分组.我也试过使用〜选择器没有任何成功:

var a = $('h3 ~ div.item');

for( var i = 0; i < a.length; i+=3 ) {
    a.slice(i, i+3).wrapAll('<div class="row"></div>');
}

任何帮助将受到高度赞赏.

Answer 1

我已经完成了这个并且它正在工作

\n\n

$(function(){\n    var h3=$(\'h3\');\n    h3.each(function(){\n        var divs=$(this).nextUntil(\'h3\');\n        var row_wreapper=$(\'<div></div>\');\n        while(divs.length)\n        {\n            var grp=divs.splice(0, 3);\n            var row=$(\'<div class="row"></div>\');\n            $(grp).each(function(){\n                row.append($(this));\n            });\n            row_wreapper.append(row);\n        }\n        $(this).after(row_wreapper.html());\n    });\n});\xe2\x80\x8b\n

\n\n

DEMOitem或对 DEMO类进行一些额外检查。

\n\n

或者

\n\n

$(function(){\n    var h3=$(\'h3\');\n    h3.each(function(){\n    var divs=$(this).nextUntil(\'h3\');\n    var row_wreapper=$(\'<div></div>\');\n    while(divs.length)\n    {\n        var grp=divs.splice(0, 3);\n        var row=$(grp).wrapAll(\'<div class="row"></div>\');\n        if(row.children().length) row_wreapper.append(row);\n    }\n    $(this).after(row_wreapper.html());\n    });\n});\xe2\x80\x8b\n

\n\n

演示。

\n