jQuery / Méthode / .parent() - Sélectionner les parents directs

Dans jQuery, .parent() renvoie un nouvel objet jQuery contenant les parents directs des éléments sélectionnés, en remontant d’un seul niveau. .parent(".card") conserve uniquement les parents correspondant à .card ; la recherche ne continue pas plus haut. Un parent commun à plusieurs éléments de départ ne figure qu’une fois.

Choisir entre parent, parents et closest

Dans l’API .parent(), le parent est le nœud immédiatement supérieur dans le modèle objet du document (DOM). Un cadre visuel ou une référence de positionnement CSS ne correspond pas forcément à ce parent. Vous pouvez enchaîner $(".pick").parent().addClass("picked") pour modifier les résultats. Cette recherche ne déplace ni ne supprime les boutons d’origine.

Utilisez .parents() pour tous les ancêtres correspondants et .closest() pour la carte la plus proche malgré un conteneur intermédiaire. closest teste aussi l’élément de départ : sur une carte, il peut renvoyer cette carte elle-même. parent accepte un sélecteur facultatif sous forme de chaîne, pas une fonction ni un nombre de niveaux.

Exemple complet de cartes imbriquées

Enregistrez tout le code en UTF-8 dans parent-demo.html et ouvrez-le dans le navigateur. Internet est nécessaire pour charger le fichier jQuery officiel 4.0.0 depuis le réseau de diffusion de contenu (CDN), sans installation. La sélection initiale, l’ajout d’un conteneur, l’ajout d’une carte, la réinitialisation et les deux exemples de console ont été exécutés avec 3.7.1 et 4.0.0.

Les deux boutons d’Alpha partagent alpha-body comme parent direct. Le bouton de Beta est directement dans la carte beta. Les contours turquoise montrent les résultats. buttons compte les boutons de départ, parents les résultats et DOM buttons les boutons toujours présents dans le document.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Select immediate parents</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; max-width: 100%; }
    #board, .card, .body { padding: 12px; border: 1px solid #aab; margin: 10px 0; }
    .picked { outline: 3px solid teal; outline-offset: -3px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Select one parent level</h1>
  <label for="mode">Traversal:</label>
  <select id="mode">
    <option value="parent">parent()</option>
    <option value="filtered">parent('.card')</option>
    <option value="closest">closest('.card')</option>
    <option value="ancestors">parents('section')</option>
  </select>
  <button type="button" id="wrap">Wrap Beta button</button>
  <button type="button" id="add">Add Gamma</button>
  <button type="button" id="reset">Reset</button>
  <section id="board">
    <article id="alpha" class="card">
      Alpha card
      <div id="alpha-body" class="body">
        <button type="button" id="alpha-one" class="pick"><span>Alpha one</span></button>
        <button type="button" id="alpha-two" class="pick">Alpha two</button>
      </div>
    </article>
    <article id="beta" class="card">
      Beta card
      <button type="button" id="beta-one" class="pick">Beta one</button>
    </article>
  </section>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const initial = $("#board").html();
      function report() {
        const $buttons = $("#board .pick");
        let $result;
        switch ($("#mode").val()) {
          case "filtered": $result = $buttons.parent(".card"); break;
          case "closest": $result = $buttons.closest(".card"); break;
          case "ancestors": $result = $buttons.parents("section"); break;
          default: $result = $buttons.parent();
        }
        $("#board, #board *").removeClass("picked");
        $result.addClass("picked");
        const ids = $result.map(function () { return this.id; }).get();
        $("#result").text(`buttons=${$buttons.length}\nparents=${$result.length}: ${ids.join(", ") || "(none)"}\nDOM buttons=${$("#board .pick").length}`);
      }
      $("#mode").on("change", report);
      $("#wrap").on("click", function () {
        if (!$("#beta-body").length) $("#beta-one").wrap('<div id="beta-body" class="body"></div>');
        report();
      });
      $("#add").on("click", function () {
        if (!$("#gamma").length) $("#board").append('<article id="gamma" class="card">Gamma card <button type="button" id="gamma-one" class="pick">Gamma one</button></article>');
        report();
      });
      $("#reset").on("click", function () { $("#board").html(initial); $("#mode").val("parent"); report(); });
      report();
    });
  </script>
</body>
</html>

Au départ, trois boutons donnent deux parents distincts, car le parent partagé n’apparaît qu’une fois.

buttons=3
parents=2: alpha-body, beta
DOM buttons=3

1. Choisissez parent('.card') : seul beta correspond. Le parent direct des boutons d’Alpha est .body ; le parcours ne continue pas jusqu’à alpha.
2. closest('.card') sélectionne alpha et beta en passant par le conteneur .body d’Alpha.
3. parents('section') donne une seule fois l’ancêtre commun board.
4. Appuyez sur Wrap Beta button, puis choisissez parent() : alpha-body et beta-body apparaissent. parent('.card') devient vide. Les boutons restent présents ; seule la relation directe a changé.
5. Add Gamma ajoute un bouton directement dans une nouvelle carte. parent('.card') donne gamma seul ; closest('.card') donne trois cartes. Répéter l’ajout ou l’enveloppement ne crée pas de doublons.
6. Reset restaure le HTML initial et le mode parent(). Modifiez une seule condition, puis réinitialisez pour comparer.

report() sélectionne les boutons à chaque appel. Un résultat conservé dans const $parents = $(".pick").parent() ne s’actualise pas automatiquement après un changement du DOM. Recommencez la recherche après un nouvel emballage ou un déplacement si la relation actuelle est nécessaire.

Doublons, résultats vides et point de départ d’un événement

Après Reset, exécutez ce code dans la console des outils de développement. parent sur une sélection vide donne un objet jQuery de longueur zéro ; vérifiez .length avant d’accéder au nœud. Le parent de html peut être document plutôt qu’un élément ordinaire : ne supposez pas que chaque résultat possède une propriété propre aux éléments comme tagName.

const $buttons = $("#board .pick");
console.log(`buttons=${$buttons.length}; unique parents=${$buttons.parent().length}`);
console.log(`Alpha parent(.card)=${$("#alpha-one").parent(".card").length}`);
console.log(`Alpha closest(.card)=${$("#alpha-one").closest(".card").attr("id")}`);
console.log(`card closest itself=${$("#alpha").closest(".card").attr("id")}`);
console.log(`empty parent count=${$().parent().length}`);
console.log(`html parent is document=${$("html").parent().get(0) === document}`);

buttons=3; unique parents=2
Alpha parent(.card)=0
Alpha closest(.card)=alpha
card closest itself=alpha
empty parent count=0
html parent is document=true

Un clic sur un span à l’intérieur du bouton donne ce span dans event.target. Dans un gestionnaire délégué utilisant une fonction classique, this permet de partir du bouton correspondant. Le code suivant, dans la console de la même page, déclenche ce clic puis retire uniquement son propre gestionnaire nommé.

$("#board").on("click.parentExample", ".pick", function (event) {
  console.log(`parent=${$(this).parent().attr("id")}; target=${event.target.tagName.toLowerCase()}`);
});
$("#alpha-one span").trigger("click");
$("#board").off(".parentExample");

parent=alpha-body; target=span

La cible est span, mais le parent indiqué est alpha-body, celui du bouton. $(event.target).parent() donnerait le bouton. Une fonction fléchée ne reçoit pas ici le bouton comme this : utilisez une fonction classique. Pour obtenir la carte, appliquez .closest(".card") au bouton.

Comprendre un parent inattendu

Inspectez le DOM réel dans le panneau Elements des outils de développement. Un plugin ajoutant un div intermédiaire peut rendre .parent(".card") vide. Déterminez d’abord si vous voulez le parent direct ou l’ancêtre correspondant le plus proche, au lieu d’accumuler arbitrairement .parent().parent().

Un sélecteur de départ trop large peut modifier des parents sans rapport. Limitez-le par exemple à #board .pick et vérifiez longueur et identifiants du résultat avant de changer les styles. En cas de résultat vide, vérifiez d’abord l’existence des éléments de départ au moment de l’exécution. La fonction de préparation du DOM s’exécute après l’analyse du HTML initial ; rappeler report() inclut les boutons ajoutés ensuite.