javascript - for - jquery each json object

Cómo iterar sobre los niños con for-loop

Question

Quiero iterar sobre todos los elementos .children() valor de retorno de .children() jQuery, 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 hijo?

Quiero esto porque quiero acceder al (i-1) -th y (i + 1) -th niño en el ciclo, así:

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 each() no funcionará.

Answer 1

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

Answer 2

La función each() funcionará, eche 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'');

});

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

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; con suerte 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

Utilice .eq () para obtener el que está en el índice especificado de los elementos dom coincidentes establecidos.

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 simple es lograr esto sin el uso de bucle. cada ()

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

Answer 5

childs es una matriz de Javascript . Entonces accede a objetos dentro de la matriz por childs[indexOfElement] . En tu 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 : Su código tiene un error. El elemento de la colección secundaria NO es un objeto jQuery. Es solo un elemento DOM. Entonces debes envolverlos en $(...) para usar las funciones de jQuery. Entonces tu código se convertirá en:

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

PD. Debería llamarse children . :)