jQuery « Как обернуть несколько элементов в DIV.

Всем привет! Есть у меня большой DIV, в нем много мелких DIV, я хочу прогнать этот большой DIV, и каждые N элементов обернуть(wrap) в другой DIV с классом.

Пример:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

$('.myclass div').each(function() {

if(elements.length >= settings.imagesPerLine) { // тут срабатывает когда количество элементов достигает размера строки
    // тут нужно как нибудь сделать, чтобы все(не каждый) элементы массива обернулись в <div class="line"></div>
    elements = [];
}

    elements.push($(this));
});
 


Вот как мне обернуть несколько элементов сразу? Не могу разобраться что-то.
0
jquery js wrap wrapall

1 ответов

Набросал вам такой вариант. На мой взгляд не очень элегантный, но по крайней мере работает и сегодня уже нет сил для чего-то гениального ))

1

Нашел еще один неплохой и элегантный вариант:


var set = this.children(); // набор элементов
for(var i = 0, len = set.length; i < len; i += settings.imagesPerLine){
  set.slice(i, i + settings.imagesPerLine) // выбираем нужно количество картинок для линии
    .wrapAll('<div class="line"/>')
    .wrap('<div class="photo"/>');
}
 
0

$(document).ready(function(){
    var count = 5; //Количество элементов на странице
    itemsWrapper(count);

    function itemsWrapper(count){
        $('#wrapper > .item').each(function(i){
            if((i == 0) || (i % count == 0)){
                id = i;
                //Вставляем пустую обертку для набора
                $('#wrapper').append('<div class="page" id="page_'+i+'"></div>');
            }

            $(this).appendTo('#page_'+id); // Переносим элемент в обертку
        });
    }

});
 

Может кому пригодится.
0