jQuery的包裹在每一个DIV元素X(jQuery wrap every X elements i

我有一个H3标签preseded的元素（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>

我想在这里提出了一个解决方案： 插入<DIV>对于使用Javascript每5个元素 ，但它显然分组的所有的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:

我已经结束了这个和它的工作

$(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。

要么

$(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。

Answer 2:

这里有一个插件，当我想换行，我使用，只是因为它的干净，让我做令人惊奇的事情 。 || 你可以找到包装源以纯文本在这里

唯一的问题是 - 因为你的DOM的，我们必须做的所有项目，他们组的一些结构，才可以遍历这些列表。

我们会首先做到这一点 - >

$.each($('h3'), function(i,v){
  $(v).nextUntil($('h3')).wrapAll('<div class="row-container"></div>');    
});

.nextUntil()是jQuery的1.6或更高版本，所以希望有没有限制在那里。

现在，上面的插件我联系，大家可以参考它，并把它每一个新的内包装对象row-container 。

$.each($('.row-container'), function(i,v){
  $(v).nwrapper({
    wrapEvery      : 3,
    defaultClasses : false,
    extraClasses: ['row']     
  });
});

证据是在布丁所以这里的的jsfiddle

Answer 3:

试试这个。 一个简单的解决方案..

var h3s = $('h3');   // caching all h3 tags

// looping over h3 tags
$.each(h3s, function(i, hs) {

    // selecting div.item between two h3
    // for example
    // div.item between this (current h3) and h3:eq(1) (next h3) and so on

    var divs = $(this).nextUntil($('h3').eq(i+1), 'div.item');

    // looping with divs
    $.each(divs, function(i, el) {

        // checking for div.item
        // to group for wrapping

        if(i % 3 == 0) {
            divs.slice(i , i+3).wrapAll('<div class="row">');
        }
    });
});

工作样本

相关参考文献：

• .nextUntil()

• wrapAll()

• .slice()

• .each()

Answer 4:

你可以这样做：

(function(c, h, s, $g, n) {
    $(c).find([h,s].join()).each(function() {
        if ($(this).filter(h).length || $g.find(s).length == n) {
            $g = $g.clone().empty().insertAfter(this);
        }
        $g.append($(this).not(h));
    });
})(document, 'h3', '.item', $('<div class="itemGroup"/>'), 3);

如果你的元素包含在一个特定的容器中，然后通过容器的选择（例如“#myContainer”），而不是document 。

DEMO

文章来源: jQuery wrap every X elements in div