¿Cómo itero a través de elementos secundarios de un div usando jQuery?

257

Tengo un div y tiene varios elementos de entrada ... Me gustaría recorrer cada uno de esos elementos. Ideas?

jquery iteration

— Shamoon
fuente

476

Use children()y each(), opcionalmente, puede pasar un selector achildren

$('#mydiv').children('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

También puede usar el selector secundario inmediato:

$('#mydiv > input').each(function () { /* ... */ });

— Andy E
fuente

68

luego use $ (this) dentro del cierre para acceder al elemento "actual" en el bucle.

— amarsuperstar

1

@amarsuperstar: estaba en el proceso de agregar esa información :-)

— Andy E

¿Hay alguna manera de saber el valor de "n", suponiendo que $ (este) es el "n" th hijo del padre?

— Souvik Ghosh

1

@SouvikGhosh: el índice se pasa como el primer argumento para la función de devolución de llamada each(). Verifique los documentos, vinculados en la respuesta anterior.

— Andy E

56

También es posible iterar a través de todos los elementos dentro de un contexto específico, sin importar cuán profundamente anidados estén:

$('input', $('#mydiv')).each(function () {
    console.log($(this)); //log every element found to console output
});

El segundo parámetro $ ('# mydiv') que se pasa al selector jQuery 'input' es el contexto. En este caso, la cláusula each () iterará a través de todos los elementos de entrada dentro del contenedor #mydiv, incluso si no son hijos directos de #mydiv.

— Liquinaut
fuente

1

Probablemente debido a la anidación, esta solución funcionó para mí, mientras que la otra no. Por esa razón, creo que esta es normalmente la mejor solución.

— arame3333

Esto es lo que estaba buscando. ¿Alguna forma de hacer json a partir de sus valores? Necesito publicar todo el tema como json.

— Muhammad Saqib

8

Si necesita recorrer elementos secundarios de forma recursiva :

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // Show element
        console.info($currentElement);
        // Show events handlers of current element
        console.info($currentElement.data('events'));
        // Loop her children
        recursiveEach($currentElement);
    });
}

// Parent div
recursiveEach($("#div"));

NOTA: En este ejemplo, muestro los controladores de eventos registrados con un objeto.

— tomloprod
fuente

5

También se puede hacer de esta manera:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});

— Umar Asghar
fuente

3

$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

Esto itera a través de todos los elementos secundarios y se puede acceder a su elemento con valor de índice por separado utilizando elemento e índice respectivamente.

— Surya Swanoff
fuente

1

children () es un ciclo en sí mismo.

$('.element').children().animate({
'opacity':'0'
});

— Dan185
fuente

1

No creo que necesite usar each(), puede usar el bucle estándar

var children = $element.children().not(".pb-sortable-placeholder");
for (var i = 0; i < children.length; i++) {
    var currentChild = children.eq(i);
    // whatever logic you want
    var oldPosition = currentChild.data("position");
}

de esta manera puede tener el estándar para funciones de bucle como breaky continuefunciona de manera predeterminada

también el debugging will be easier

— Basheer AL-MOMANI
fuente

Mi experiencia es que $.each()siempre es más lenta que un forbucle, y esta es la única respuesta que la usa. La clave aquí es usar el .eq()para acceder al elemento real dentro de la childrenmatriz y no la []notación de corchete ( ).

— elPastor