Pregunta

Estoy tratando de envolver un cierto número de elementos en una div. El problema es que el número de elementos puede variar en función de la entrada del usuario. Así el número de elementos podría ser 2, 3, 4, o incluso más. Tengo una variable que me dice cómo deben ser envueltos muchos elementos. Así, por ejemplo, mi página puede tener este aspecto:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

Ahora tengo que envolver los de otro div basado en mi variable. Por lo tanto, si mi variables llevó a cabo un valor de 3, que se vería así:

   <div class="testing"> 
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>   
   </div>

   <div class="testing">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
   </div>

Yo estaba usando este código:

$(this).add($(this).next())
       .add($(this).next().next())
       .wrapAll('<div class="testing"></div>');

El problema con esto es que necesitaría saber cuántos elementos van a estar allí. ¿Hay una manera dinámica para hacer esto? También vi la función slice y trató de utilizar de esta manera:

for(var i=0;i<img_cnt;i+=img_row){
    obj.children().slice(i,i+img_row).wrapAll('<div class="row"></div>');
}

No está funcionando, sin embargo. Tengo 8 divs. Cabe terminando 3 juntos, así que debe tener 3 nuevos divs con 3 en la primera 2 y 2 en el pasado, ya que sólo hay 8 divs. Sin embargo, consigo 3 divs en el primer nuevo div, a continuación, los próximos 2 divs no se envuelven en absoluto, y luego los últimos 3 divs están envueltos en una nueva div. No estoy seguro de por qué no está envolviendo bien. ¿Tiene alguna idea de cómo hacer esto o tal vez incluso un método mejor?

¿Fue útil?

Solución

El código no está funcionando porque children está cambiando. Trate de usar slice en un conjunto constante:

var all = $('.test'); 
for(i=0; i < all.length; i += img_row) {
   all.slice(i, i + img_row).wrapAll('<div class="row" />'); 
}

Ejemplo: http://jsbin.com/upaji

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top