cómo hacer que los niños arreglen un elemento en jquery

Question

Aquí está mi elemento, quiero acomodar a los niños dentro de él bucleándolos.

<div id="animDummy1"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Aquí es cómo me imagino que el código debería ser, pero los niños(), por supuesto, no devolver una matriz de los niños

var children=$('#animDummy1').children(); 
for(var i=0;i<children.length;i++){ 
    children[i].css('left',i*120+'px'); 
} 

La pregunta - ¿Puedo obtener un conjunto para su uso en niños ¿un bucle? Sé que puedo adjuntar una función para que se ejecute cada uno de los niños, pero ¿puedo obtener ese "yo" creciente allí?

Thnx.

Answer 1

children() devuelve un objeto jQuery de los niños que se asemeja a una matriz de nodos DOM. Su problema está dentro del bucle: cuando accede a objetos individuales con [], obtiene nodos DOM simples que no tienen un método css. Utilice .eq(i) o $(children[i]).

O simplemente use el método each(), que le permite hacer lo mismo sin tener que escribir un bucle for a mano. Lea los documentos para averiguar cómo obtener el índice del elemento dentro de la devolución de llamada.

Answer 2

Esta es la forma correcta.

var children=$('#animDummy1').children(); 

children.each(function(idx, val){ 
    $(this).css('left',idx*120+'px'); 
}); 

o en realidad esto es mejor.

$('#animDummy1').children().each(function(idx, val){ 
    $(this).css('left',idx*120+'px'); 
}) 

Answer 3

Esto funciona muy bien para mí

$(document).ready(function(){ 

    var children = $('#animDummy1').children();   

    $(children).each(function(index, item){     
     console.log(index);    
    });   
}); 

jsFiddle Example

Answer 4

children() devuelve un conjunto de objetos jQuery y children[i(anyNumber)] devolverá el elemento DOM. Entonces, al llamar al método css jQuery en el elemento dom, se producirá un error. Debe usar el método eq si desea acceder a cualquier elemento en particular en un índice determinado. Prueba esto.

var children = $('#animDummy1').children(); 
for(var i = 0;i < children.length;i++){ 
    children.eq(i).css('left', (i*120+'px')); 
} 

.eq() referencia: http://api.jquery.com/eq/

Answer 5

Muchos métodos jQuery vamos a pasar directamente a una función en lugar del nuevo valor que desea asignar.

Para su ejemplo ...

$('#animDummy1').children().css('left', function(i, curr_left) { 
    return i * 120; 
}); 

---

Así que aquí me llamaron .css() directamente sobre el conjunto .children(), y en lugar de un número para el valor 'left', me dio una función.

La función se invoca una vez para cada elemento. Los parámetros representan el índice de la iteración actual y el valor de css actual del elemento actual en la iteración.

El valor return de la función se utilizará como el valor para establecer en el elemento actual.

Answer 6

Las otras respuestas para usar jQuery's children().each() son útiles en la mayoría de los casos. Sin embargo, si usted no necesita una matriz de JavaScript real, puede hacer lo siguiente:

var childrenArray = $('#animDummy1').children().toArray(); 

Esto permitiría que tiene una matriz real para su uso en un bucle o con otras funciones que requieren una matriz como un parámetro.

Answer 7

$(function() { 
     var sortOrder = [3, 4, 1, 5,2]; 
     var onLoad = $('#parentDiv>p').get(); 
     for (var i = 0; i < onLoad.length; i++) { 
      var inRearranging = $('#parentDiv>P').get(); 
      var orderingID = "#paragraph" + sortOrder[i]; 
      $(orderingID).insertBefore("#" + inRearranging[i].id); 
     } 
    }); 



<div id="parentDiv"> 
    <p id="paragraph1">1</p> 
    <p id="paragraph2">2</p> 
    <p id="paragraph3">3</p> 
    <p id="paragraph4">4</p> 
    <p id="paragraph5">5</p> 
</div> 

Answer 8

Uso de jQuery:

each() permite obtener a cada índice de la matriz con niños de $ ('# someObject'):

$('#animDummy1').each(function(index, item) { 
    // Do Something with each $(item) children of #animDummy with index 
});