.before()/.after() element without it closing automaticly

Question

This is what I'm trying to do.

I am calling on a xml file and creating a lot of div around the content from the file. What I want to do is to add a div around every 15 div. The divs have the class "item". The items are enclosed in a div called "container".

I first try to add a open <div> in front of the first div in the container. Then I look for the sixteenth div and try to add a closing </div> and then I open another <div> and then I try to close the last one by adding a closing </div> after the lest "item"

$(".container .item:first-child").before('<div class="inner-container">');

$(".container  .item:nth-child(16)").before('</div><div class="inner-container">');

$(".container  .item:last-child").after('</div>');

My problem is is that the div are closed automatically so the appear as an empty divs with the rest of the "item"s

I'm not sure if this is a jQuery thing or if the browser is doing it. But what can I do to make this work?

I'm doing this because I want to scroll the container from left to right.

Answer 1

You should select the group you want and use the wrapAll()^(docs) method to wrap them with the container.

Example: http://jsfiddle.net/FvC6A/

$(".container .item").slice(0,15).wrapAll('<div class="inner-container"></div>')
                 .end().slice(15).wrapAll('<div class="inner-container"></div>');

...or to loop it, you could do this:

Example: http://jsfiddle.net/FvC6A/1/

$(".container .item:nth-child(15n+1)").each(function(i){
    $(this).nextAll('.item').andSelf()
           .slice(0,15).wrapAll('<div class="inner-container"></div>');
});

...or this:

Example: http://jsfiddle.net/FvC6A/2/

var items = $(".container .item");

while( items[0] ) {
    items = items.slice( 0,15 ).wrapAll('<div class="inner-container"></div>')
                                                              .end().slice(15);
}

...or this:

Example: http://jsfiddle.net/FvC6A/3/

$(".container .item").each(function(i) {
    if( !(i % 15) )
        $(this).nextAll().andSelf().slice( 0,15 ).wrapAll('<div class="inner-container"></div>');
});

...or this:

Example: http://jsfiddle.net/FvC6A/4/

var items = $(".container .item"),i=0;

while( i < items.length ) {
    items.slice( i,i+=15 ).wrapAll('<div class="inner-container"></div>');
}

Answer 2

Something like that should work. Take all elements, and wrap 15 of them. Then take next 15 elements and wrap them. And so on and on until there's no elements left.

var allElements = $('.container .item'),
    WRAP_BY = 15;
for (var i = 0; i < allElements.length; i += WRAP_BY) {
    //first loop, elements 0 : 15, next loop elements 15:30 and so on
    allElements.slice(i, i + WRAP_BY).wrapAll('<div class="inner-container" />');
}