come ottenere array figli di un elemento in jquery

Question

Ecco il mio elemento, voglio organizzare i bambini al suo interno scorrendoli attraverso di loro.

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

Ecco come immagino il codice dovrebbe essere ma i bambini(), ovviamente, non restituire un array di bambini

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

La domanda - posso ottenere array di bambini per l'uso in un ciclo? So che posso attaccare una funzione per ognuno dei bambini da eseguire, ma posso ottenere quella "i" crescente lì dentro?

Thnx.

Answer 1

children() restituisce un oggetto jQuery dei bambini che assomiglia a una serie di nodi DOM. Il tuo problema è all'interno del ciclo: quando accedi a singoli oggetti con [], ottieni i normali nodi DOM che non hanno un metodo css. Utilizzare .eq(i) o $(children[i]).

O semplicemente utilizzare il metodo each(), che consente di fare lo stesso senza dover scrivere un ciclo for a mano. Leggi i documenti per scoprire come ottenere l'indice dell'elemento all'interno del callback.

Answer 2

Questo è il modo corretto.

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

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

o in realtà questo è meglio.

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

Answer 3

Questo funziona bene per me

$(document).ready(function(){ 

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

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

jsFiddle Example

Answer 4

children() restituisce un insieme di oggetti jQuery e children[i(anyNumber)] restituirà l'elemento dom. Quindi chiamare il metodo css jQuery sull'elemento dom attraverso un errore. È necessario utilizzare il metodo eq se si desidera accedere a un particolare elemento in un determinato indice. Prova questo.

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

.eq() di riferimento: http://api.jquery.com/eq/

Answer 5

Molti metodi di jQuery lasceranno passare una funzione direttamente al posto del nuovo valore da assegnare.

Per esempio ...

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

---

Così qui ho chiamato .css() direttamente sul set .children(), e invece di un numero per il valore 'left', ho dato una funzione.

La funzione viene richiamata una volta per ciascun elemento. I parametri rappresentano l'indice dell'iterazione corrente e il valore css corrente dell'elemento corrente nell'iterazione.

Il valore return della funzione verrà utilizzato come valore da impostare sull'elemento corrente.

Answer 6

Le altre risposte all'uso di jQuery children().each() sono probabilmente utili per la maggior parte dei casi. Tuttavia, se avete bisogno di un array reale javascript, è possibile effettuare le seguenti operazioni:

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

Ciò consentirebbe di avere una vera e propria gamma per l'utilizzo in un loop o con altre funzioni che richiedono una matrice come parametro.

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

utilizzare jQuery:

.each() ottenere consentire a ciascun indice di array con bambini di $ ('# someObject'):

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