Comment faire pour itérer parmi les éléments enfants d'un div en utilisant jQuery ?

Question

J'ai un div et il contient plusieurs éléments d'entrée... Je voudrais itérer à travers chacun de ces éléments. Des idées ?

Answer 1

Utilice children() y each() vous pouvez éventuellement passer un sélecteur à children

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

Vous pouvez aussi simplement utiliser le sélecteur d'enfant immédiat :

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

Answer 2

Il est également possible d'itérer à travers tous les éléments dans un contexte spécifique, quelle que soit la profondeur de leur imbrication :

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

Le deuxième paramètre $('#mydiv') qui est transmis au sélecteur jQuery 'input' est le contexte. Dans ce cas, la clause each() parcourra tous les éléments d'entrée dans le conteneur #mydiv, même s'ils ne sont pas des enfants directs de #mydiv.

Answer 3

Si vous devez parcourir les éléments enfants en boucle récursivement :

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"));   

---

NOTE : Dans cet exemple, je montre les gestionnaires d'événements enregistrés avec un objet.

Answer 4

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

Ceci itère à travers tous les enfants et leur élément avec une valeur d'index peut être accédé séparément en utilisant élément y indice respectivement.

Answer 5

On peut aussi le faire de cette façon :

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