Come iterare children a-loop

Question

voglio iterare su tutti Childs del valore di ritorno .children() di un jQuery, come questo:

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
    childs__.foo(); 

Cosa devo scrivere nella linea 3, invece di __, per accedere al bambino i-esimo?

voglio questo becaus voglio accedere al (i-1) -esimo e (i + 1) -esimo figlio nel ciclo, in questo modo:

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    childs<<i>>.css('height', childs<<i - 1>>.height()); 
    childs<<i>>.css('width', childs<<i + 1>>.width()); 
} 

quindi immagino che la funzione sarà each() non funziona.

Answer 1

childs è un javascript array. Quindi accedi agli oggetti all'interno dell'array per childs[indexOfElement]. Nel tuo caso childs[i].

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
    childs[i].foo(); 

e

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    childs[i].css('height', childs[i-1].height()); 
    childs[i].css('width', childs[i+1].width()); 
} 

MA: Il codice contiene un errore. L'elemento della collezione children NON è un oggetto jQuery. È solo un elemento DOM. Quindi devi avvolgerli in $(...) per utilizzare le funzioni jQuery. Quindi il tuo codice diventerà:

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    var thisElement = $(childs[i]); 
    var next = $(childs[i+1]); 
    var prev = $(childs[i-1]); 
    thisElement.css('height', prev.height()); 
    thisElement.css('width', next.width()); 
} 

PS. Dovrebbe essere chiamato children. :)

Answer 2

Non sarebbe più semplice con questo selettore http://api.jquery.com/nth-child-selector/?

Answer 3

È possibile utilizzare la funzione each() e utilizzare "this" per ottenere l'oggetto corrente. Quindi puoi usare le funzioni next() e prev() invece di i + 1 e i-1 rispettivamente. Non ho testato il codice in modo che possa funzionare o meno; auspicabilmente punti nella giusta direzione :)

jQuery.each($element.children(), function() { 
{ 
    $(this).css('height', $(this).prev().height()); 
    $(this).css('width', $(this).next().width()); 
} 

Answer 4

La funzione each() funzionerà, un'occhiata a questo:

$('#something').children().each(function(index) { 

    $(this).css('width', (parseInt($(this).css('width').replace('px', '')) + index) + "px"); 

    // to access the previous and next element: 
    $(this).prev().css('width', '100px'); 
    $(this).next().css('width', '200px'); 

}); 

che modificano la larghezza, aggiungendo l'indice come un pixel ogni iterazione - solo per dimostrare come ottenere l'indice.

Answer 5

Utilizzare .eq() per ottenere quello all'indice specificato del set di elementi dom corrispondenti.

var childs = $element.children();   
for (var i = 1; i < childs.length - 1; i++) 
{ 
    childs.eq(i).css('height', childs.eq(i - 1).height()); 
    childs.eq(i).css('width', childs.eq(i + 1).width()); 
} 

e l'altro approccio semplice è quello di realizzare questo senza per uso ciclo .each()

jQuery.each($element.children(), function() { 
{ 
    $(this).css('height', this.prev().height()); 
    $(this).css('width', this.next().width()); 
}