Parcours jQuery - méthode children()

Manuel de parcour jQuery

Instance

Trouver tous les éléments enfants des div ayant la classe "selected" et les rendre bleus :

$("div").children(".selected").css("color", "blue");

Essayez-le vous-même

Définition et utilisation

La méthode children() retourne tous les éléments enfants directs de l'élément sélectionné.

Syntaxe

.children(selector)
Paramètre Description
selector Valeur de chaîne, contenant l'expression de sélecteur correspondante aux éléments correspondants.

Explication détaillée

Si une collection d'éléments DOM est donnée sous forme d'objet jQuery, la méthode .children() nous permet de récupérer ces éléments dans l'arbre DOM et de construire un nouvel objet jQuery avec les éléments correspondants..find() Similaire à la méthode .children(), mais cette dernière ne se déplace que vers le bas de l'arbre DOM d'un seul niveau.

Notez que, comme la plupart des méthodes jQuery, .children() ne retourne pas les nœuds de texte ; si vous avez besoin d'obtenir tous les nœuds enfants, y compris les nœuds de texte et les commentaires, utilisez .contents().

Cette méthode accepte une expression de sélecteur en tant que paramètre optionnel, du même type que les paramètres que nous passons à $(). Si le sélecteur est appliqué, il teste si les éléments correspondent à l'expression pour filtrer ces éléments.

Pensez à cette page avec une liste imbriquée de base :

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Essayez-le vous-même

Si nous commençons par la liste level-2, nous pouvons trouver ses éléments enfants :

$('ul.level-2').children().css('background-color', 'red');

Le résultat de cette ligne de code est que les éléments A, B, C obtiennent un arrière-plan rouge. Comme nous n'avons pas appliqué l'expression de sélecteur, l'objet jQuery retourné contient tous les éléments enfants. Si un sélecteur est appliqué, seules les éléments correspondants seront inclus.

Manuel de parcour jQuery