jQuery обернуть каждый X элементов в div

у меня есть список элементов (ДИВС) preseded на Н3 тег

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

etc...

используя jQuery, я хотел бы сгруппировать каждые 3 divs (или меньше), а затем каждый 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>

я попробовал решение, предложенное здесь: вставить

7
grouping jquery

4 ответов

Я закончил с этим, и он работает

$(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());
    });
});​

демо или с небольшой дополнительной проверки item класс демо.

или

$(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());
    });
});​

демо.

4

здесь есть плагин, который я использую, когда хочу обернуть, просто потому, что он чистый и позволяет мне делать удивительные вещи. / / вы можете найти источник для обертки в обычном тексте здесь

единственная проблема заключается в том, что из-за вашего 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

2

попробуйте это. Простое решение..

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">');
        }
    });
});

рабочий образец

связанные ссылки:

2

вы можете сделать что-то вроде этого:

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

демо

1