web-dev-qa-db-fra.com

Comment parcourir les éléments enfants d'une div à l'aide de jQuery?

J'ai une div et elle contient plusieurs éléments d'entrée ... J'aimerais parcourir chacun de ces éléments. Des idées?

jqueryiteration
224
Shamoon

Utilisez children() et 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 immédiat d'enfants:

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

Il est également possible de parcourir tous les éléments dans un contexte spécifique, peu importe la profondeur de leur imbrication:

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

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

46
Liquinaut

Si vous devez parcourir les éléments enfants 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"));

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

3
tomloprod

Cela peut être fait de cette façon aussi.
$('input', '#div').each(function () { console.log($(this)); //log every element found to console output });

3
Umar Asghar

Je ne pense pas que vous deviez utiliser each() , vous pouvez utiliser la norme pour la boucle

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 cette façon, vous pouvez avoir la norme pour les fonctions de boucle comme break et continue par défaut 

aussi, le debugging will be easier

1
Basheer AL-MOMANI

children () est une boucle en soi.

$('.element').children().animate({
'opacity':'0'
});
1
Dan185
$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

Cette itération à travers tous les enfants et leur élément avec une valeur d'index est accessible séparément à l'aide de élément et index respectivement.

0
Surya Swanoff