jQuery将div中的每个X元素包装起来 [英] jQuery wrap every X elements in div

问题描述

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

I have a list of elements (divs) preseded by a H3 tag

<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进行分组，如下所示:

Using jQuery, I'd like to group every 3 divs (or less) followed by each h3 like this:

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

我尝试了此处提出的解决方案:插入< div>每5个使用Javascript的元素 但是它显然将所有div分组. 我也尝试使用〜选择器，但没有成功:

I tried a solution proposed here: Insert <div> for every 5 elements using Javascript but it obviously grouped ALL the divs. I also tried using ~ selector without any success:

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

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

任何帮助将不胜感激.

推荐答案

我已经解决了这个问题，并且可以正常工作

I've ended up with this and it's working

$(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 或对item类进行了一些额外的检查 演示.

DEMO or with a little extra checking of item class 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.

这篇关于jQuery将div中的每个X元素包装起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！