Cómo iterar sobre los niños por bucle

Question

Quiero iterar sobre todos los del niño del valor de retorno de una jQuery .children(), así:

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

¿Qué tengo que escribir en la línea 3 en lugar de __, para acceder al i-ésimo niño?

Quiero este becaus quiero acceder a la (i-1) -ésimo e (i + 1) -ésimo niño en el circuito, de esta manera:

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()); 
} 

así que supongo que la función se each() no trabajo.

Answer 1

childs es un javascript array. Para acceder a objetos dentro de la matriz, childs[indexOfElement]. En su caso childs[i].

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

y

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()); 
} 

PERO: El código tiene un error. El elemento de la colección secundaria NO es un objeto jQuery. Es solo un elemento DOM. Entonces debe envolverlos en $(...) para usar las funciones de jQuery. Entonces su código será:

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. Debería llamarse children. :)

Answer 2

¿No sería más fácil con este selector http://api.jquery.com/nth-child-selector/?

Answer 3

Puede usar la función cada() y usar "this" para obtener el objeto actual. Luego puede usar las funciones next() y prev() en lugar de i + 1 e i-1, respectivamente. No he probado el código por lo que puede funcionar o no; esperemos que apunta en la dirección correcta :)

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

Answer 4

La función each() trabajará, echar un vistazo a esto:

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

}); 

que modificará el ancho, especificando el índice como un píxel en cada iteración - solo para mostrar cómo obtener el índice.

Answer 5

Usa .eq() para obtener el que está en el índice especificado del conjunto de elementos dom coincidentes.

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()); 
} 

y el otro enfoque es sencillo de lograr esto sin el uso de bucle .each()

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