.antes de() /. After() sin que se cierre automáticamente

Question

Esto es lo que intento hacer.

Llamo a un archivo xml y creo un montón de div alrededor del contenido del archivo. Lo que quiero hacer es agregar un div alrededor de cada 15 div. Los divs tienen la clase "elemento". Los artículos están encerrados en un div llamado "contenedor".

Primero intento agregar un <div> abierto frente al primer div en el contenedor. Entonces busco la div XVI y trato de agregar un cierre </div> y luego abro otra <div> y luego trato de cerrar la última mediante la adición de un cierre </div> después de que el "elemento" para que no

$(".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>'); 

Mi problema es es que los div se cierran automáticamente para que aparezcan como un divs vacío con el resto del "elemento" s

No estoy seguro de si esto es algo de jQuery o si el navegador lo está haciendo. Pero, ¿qué puedo hacer para que esto funcione?

Estoy haciendo esto porque quiero desplazar el contenedor de izquierda a derecha.

Answer 1

Algo así debería funcionar. Toma todos los elementos y envuelve 15 de ellos. Luego tome los siguientes 15 elementos y envuélvalos. Y así sucesivamente hasta que no quedan elementos.

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

Answer 2

Debe seleccionar el grupo que desea y utilizar el método wrapAll()^(docs) para envolverlos con el contenedor.

Ejemplo:http://jsfiddle.net/FvC6A/

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

... o al lazo, usted podría hacer esto:

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

... o esta :

Ejemplo: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); 
} 

... o esto:

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

... o esto:

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