jQuery 将每个 X 元素包装在 div 中答案

【问题标题】：jQuery wrap every X elements in divjQuery 将每个 X 元素包装在 div 中
【发布时间】：2012-07-07 15:29:37
【问题描述】：

我有一个由 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>');
}

我们将不胜感激。

【问题讨论】：

标签： jquery grouping

【解决方案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.

【讨论】：

好的，这适用于 jQuery 早在 1.4.4。非常感谢！
不客气，here is another，你可能会喜欢这个。 :-)

【解决方案2】：

There is a plugin here that I use when I want to wrap, just because it's clean and allows me to do amazing things。 || You can find the source for the wrapper in plain-text here

唯一的问题是 -- 由于您的 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']     
  });
});

The proof is in the pudding so here's the jsFiddle

【讨论】：

谢谢！一种有效的方法，但我认为@thecodeparadox 的解决方案更简单。无论如何，这个解决方案也有效。

【解决方案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">');
        }
    });
});

Working sample

相关参考文献：

【讨论】：

嗨@thecodeparadox，如果我想将nextUntil() 与jquery 1.4.4（使用选择器，而不是元素）一起使用，我应该如何使用它？向 H3 添加课程？

【解决方案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

【讨论】：

编辑得更加简洁和适应性强。