jQuery包装div中的每个X元素

我有一个由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>

我尝试了这里提出的解决方案：Insert <div> for every 5 elements using Javascript
但它显然将所有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>');
}

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

解决方法

我最终得到了这个并且它正在发挥作用

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

DEMO或额外检查项目类别DEMO.

要么

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

DEMO.

原文链接：https://www.f2er.com/jquery/180933.html

jQuery包装div中的每个X元素

解决方法

猜你在找的jQuery相关文章