jQuery / Méthode / .children() - Sélectionner les enfants directs

Dans jQuery, .children() renvoie un nouvel objet jQuery contenant uniquement les enfants éléments immédiats de la sélection. Un sélecteur tel que .children(".hot") ne conserve que les enfants correspondants. Distinguez .find() pour les descendants plus profonds et .contents() pour les nœuds enfants directs, texte et commentaires compris.

Descendre d'un niveau et filtrer les candidats

La documentation de .children() limite le parcours à un niveau sous chaque élément de départ. Sans argument, tous les enfants éléments immédiats sont renvoyés, quelle que soit leur balise. Ni l'élément de départ ni les petits-enfants à l'intérieur de ses enfants ne sont automatiquement inclus.

L'argument filtre les candidats directs trouvés. .children(".hot") ne continue pas à descendre jusqu'à rencontrer cette classe. Plusieurs parents de départ apportent leurs enfants directs ; limitez la sélection initiale pour ne traiter qu'une carte précise.

Exécuter l'exemple complet de carte imbriquée

Enregistrez tout le code en UTF-8 dans children-demo.html et ouvrez-le dans un navigateur. Aucune installation n'est nécessaire ; internet sert à charger le fichier officiel jQuery par son réseau de diffusion de contenu, ou CDN. Le code utilise 4.0.0. Sélection, filtrage, ajout, réinitialisation et comparaison ont été exécutés avec 3.7.1 et 4.0.0.

card possède trois éléments directs : p identifié par title, div par body et button par action. nested se trouve dans body, donc c'est un petit-enfant de card. Intro text et un commentaire montrent d'autres types de nœuds. La classe hot de card lui-même ne le fait pas entrer dans la sélection de ses enfants.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direct children and deeper descendants</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #card { border: 2px solid #aaa; padding: 16px; max-width: 600px; }
    #card > * { display: block; padding: 8px; margin: 8px 0; border: 1px solid #ddd; }
    #card .marked { outline: 3px solid #ba6900; background: #fff5d6; }
    button { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Direct children and deeper descendants</h1>
  <div id="card" class="hot">
    Intro text
    <!-- A comment is not an element. -->
    <p id="title" class="hot">Direct paragraph</p>
    <div id="body"><p id="nested" class="hot">Nested paragraph</p></div>
    <button type="button" id="action">Direct button</button>
  </div>
  <button type="button" id="all">All direct children</button>
  <button type="button" id="hot">Direct .hot children</button>
  <button type="button" id="deep">All .hot descendants</button>
  <button type="button" id="add">Add direct .hot paragraph</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      function show($chosen) {
        $("#card").find("*").removeClass("marked");
        $chosen.addClass("marked");
        const ids = $chosen.map((_, item) => item.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$chosen.length}`);
      }
      function direct() {
        show($("#card").children());
      }
      $("#all").on("click", direct);
      $("#hot").on("click", () => show($("#card").children(".hot")));
      $("#deep").on("click", () => show($("#card").find(".hot")));
      $("#add").on("click", function () {
        if (!$("#extra").length) {
          $("<p>").attr("id", "extra").addClass("hot").text("Added paragraph").appendTo("#card");
        }
        direct();
      });
      $("#reset").on("click", function () {
        $("#extra").remove();
        direct();
      });
      direct();
    });
  </script>
</body>
</html>

Au départ, les trois enfants immédiats sont encadrés. Le fond de body apparaît aussi derrière son contenu, mais body est sélectionné ; nested ne l'est pas séparément.

title, body, action | 3

1. All direct children affiche title, body, action | 3.
2. Direct .hot children garde les enfants directs correspondants : title | 1.
3. All .hot descendants descend avec .find() : title, nested | 2. card lui-même reste exclu.
4. Add direct .hot paragraph ajoute un p à card et refait la sélection directe : title, body, action, extra | 4. L'identifiant extra est vérifié pour éviter les doublons.
5. Après l'ajout, Direct .hot children donne title, extra | 2. Reset supprime seulement extra et restaure la sélection des trois enfants d'origine.

show enlève marked des descendants précédemment sélectionnés avant de marquer le nouvel ensemble. Le passage d'une sélection directe à une sélection profonde ne laisse donc pas d'anciennes marques. Reset ne remplace ni le contenu ni le bouton d'origine.

Comparer .find() et .contents()

Après Reset, exécutez ce fragment dans la console de développement. Chaque ligne affiche les identifiants sélectionnés.

const ids = $set => $set.map((_, item) => item.id).get().join(", ");
console.log(ids($("#card").children()));
console.log(ids($("#card").children(".hot")));
console.log(ids($("#card").find(".hot")));

title, body, action
title
title, nested

.find() parcourt plusieurs niveaux de descendants, tandis que .children() descend une fois. Pour exactement deux niveaux, utilisez $("#card").children().children(".hot"). Ici, seul nested est renvoyé ; un conteneur intermédiaire supplémentaire changerait le résultat.

.contents() récupère les nœuds directs, texte et commentaires inclus. Les nœuds constituent le modèle objet du document, DOM, et comprennent éléments, texte et commentaires. Les opérations de classe et de style des éléments ne s'appliquent pas identiquement aux autres nœuds : ne les traitez pas tous comme des éléments.

Vérifier résultat vide, moment et structure

Sans élément de départ ou sans enfant élément, le résultat est vide. action ne contient que du texte : .children() est vide sans que le texte ait disparu. Cherchez les conteneurs div ou ul intermédiaires et vérifiez si la classe appartient au parent, à l'enfant ou au petit-enfant.

Une sélection ne s'actualise pas automatiquement. Un ensemble mémorisé de trois enfants garde sa longueur après l'ajout d'un p. Refaites la requête comme direct pour connaître les enfants actuels. En cas d'absence de réaction, vérifiez jQuery dans Network et les erreurs dans Console ; sélectionnez un contenu asynchrone après son insertion.