Comment trouver l'enfant d'un élément HTML dans jQuery

Les éléments HTML incluent n'importe quelle partie d'une page Web, tels que les en-têtes, les tableaux, les images et les paragraphes. Lorsque vous entrelacez des variables HTML les unes dans les autres, vous créez des éléments parent et enfant. L'élément supérieur est le père, tandis que tous les éléments entrelacés deviennent des enfants. Dans jQuery, vous pouvez obtenir l'enfant d'un élément en utilisant la fonction "children ()" (fils, en anglais), mais vous devez parcourir le tableau de valeurs créé par function.

Vérifiez que votre code inclut une référence à la bibliothèque jQuery avant d'essayer d'exécuter le script dans jQuery. Ajoutez ce code dans les "" variables (en-tête) de votre page Web, si vous ne voyez pas la référence:

Ajoutez quelques variables de script sous la référence de la bibliothèque jQuery et écrivez une fonction pour vérifier que le chargement de la page est terminé. Tout votre script doit être entre les touches de cette fonction:

$ (function () {});

Sélectionnez l'élément HTML dont vous avez besoin pour obtenir une liste d'éléments enfants. Par exemple, si vous souhaitez obtenir les enfants d'une liste non ordonnée, sélectionnez l'élément "ul". Ajoutez le sélecteur avec la fonction "children ()" pour obtenir l'enfant:

$ ('ul.level-2'). enfants ();

L'exemple précédent sélectionnera toute liste non ordonnée dont le nom de classe est "niveau 2". Cependant, lorsque "children ()" trouve plusieurs éléments enfants, un tableau de valeurs est créé. Vous aurez besoin de codes spéciaux pour traiter une matrice.

Ajoutez "children ()" avec "each ()" (each) pour parcourir le tableau d'éléments enfants. Comme il s'agit d'une structure en boucle, vous avez besoin d'une variable compteur, mais vous ne devez pas la créer à l'avance dans jQuery. Passez "i" comme argument dans chaque "each ()" pour obtenir votre compteur:

$ ('ul.level-2'). children (). each (function (i) {});

Déclarez une variable qui conservera la valeur textuelle de chaque élément enfant. Vous pouvez obtenir d'autres valeurs d'éléments, mais le texte renverra tout texte trouvé dans l'enfant et il est utile d'obtenir des données. Définissez la variable sur "$ (this)" (this) pour obtenir l’élément actuel dans lequel la fonction "each ()" fonctionne. Ajoutez "$ (this)" avec "text ()" (text) pour obtenir le texte:

var childEl = $ (this) .text ();

Émettez les valeurs sur votre page en sélectionnant un élément et ajoutez "append ()" (annexe) afin que la fonction "each ()" puisse continuer à ajouter les valeurs trouvées:

$ ('div'). append (i + ":" + childEl + "");

Dans cet exemple, "childEl" est émis pour une série de variables "". Chaque fois que jQuery répète les codes dans "each ()", il émet le numéro à partir de "i", ajoute une paire de points-virgules, génère la valeur de "childEl" et termine la ligne avec une variable de script.

Votre script final devrait ressembler à ceci:

$ (function () {$ ('ul.level-2'). children (). each (function (i) {var childEl = $ (this) .html (); $ ('div'). append (i + ":" + childEl + "");});});

Conseil

Ajoutez "console.log (childEl);" dans chaque fonction "each ()" dans la dernière ligne. Utilisez Firebug dans Firefox ou la console JavaScript dans Google Chrome pour vérifier les valeurs dans une console lors du débogage.

Remplacez "text ()" par "html ()" pour obtenir le code HTML des éléments enfants.