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

257

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

jquery iteration

— Shamoon
source

476

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 également simplement utiliser le sélecteur d'enfant immédiat:

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

— Andy E
source

68

puis utilisez $ (this) dans la fermeture pour accéder à l'élément "courant" dans la boucle.

— amarsuperstar

1

@amarsuperstar: était en train d'ajouter ces informations :-)

— Andy E

Existe-t-il un moyen de connaître la valeur de "n", en supposant que $ (this) est le "n" ème enfant du parent?

— Souvik Ghosh

1

@SouvikGhosh: l'index est passé comme premier argument à la fonction de rappel pour each(). Vérifiez les documents, liés dans la réponse ci-dessus.

— Andy E

56

Il est également possible de parcourir tous les éléments dans un contexte spécifique, peu importe à quel point ils sont imbriqués:

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

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

— Liquinaut
source

1

Probablement à cause de l'imbrication, cette solution a fonctionné pour moi tandis que l'autre ne l'a pas fait. Pour cette raison, je pense que c'est normalement la meilleure solution.

— arame3333

C'est ce que je cherchais. Y a-t-il un moyen de faire json à partir de leurs valeurs? J'ai besoin de poster tout le thème en json.

— Muhammad Saqib

8

Si vous devez parcourir les éléments enfants de manière récursive :

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.

— tomloprod
source

5

Cela peut également être fait de cette façon:

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

— Umar Asghar
source

3

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

Cela parcourt tous les enfants et leur élément avec une valeur d'index est accessible séparément en utilisant respectivement element et index .

— Surya Swanoff
source

1

children () est une boucle en soi.

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

— Dan185
source

1

Je ne pense pas que vous ayez besoin d'utiliser each(), vous pouvez utiliser la boucle standard

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 fonctionnalités de boucle comme breaket continuefonctionne par défaut

également debugging will be easier

— Basheer AL-MOMANI
source

D'après mon expérience, c'est $.each()toujours plus lent qu'une forboucle, et c'est la seule réponse qui l'utilise. La clé ici est d'utiliser le .eq()pour accéder à l'élément réel dans le childrentableau et non à la []notation bracket ( ).

— elPastor