Parcourir jQuery - méthode closest()

Guide de遍历 jQuery

Exemple

Cet exemple montre comment utiliser closest() pour la délégation d'événements. Lorsqu'un élément de liste le plus proche ou un descendant de cet élément est cliqué, le fond jaune est basculé :

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

Essayez-le vous-même

Définition et utilisation

La méthode .closest() obtient le premier élément ancêtre correspondant au sélecteur, en partant de l'élément courant le long de l'arbre DOM.

Syntaxe

.closest(selector)
Paramètres Description
selector Valeur de chaîne, contenant l'expression du sélecteur correspondant à l'élément.

Explication détaillée

Si l'objet jQuery donné représente un ensemble d'éléments DOM, la méthode .closest() nous permet de récupérer ces éléments et leurs ancêtres dans l'arbre DOM, et de construire un nouveau jQuery objet en utilisant l'élément correspondant..parents() De même que la méthode .closest(), elles parcourent également l'arbre DOM. Bien que la différence soit subtile, elle est importante :

.closest() .parents()
Commencez par l'élément courant Commencez par l'élément parent
Parcourez l'arbre DOM en sens inverse jusqu'à ce que l'un des éléments correspondant au sélecteur soit trouvé. Parcourez l'arbre DOM en sens inverse jusqu'à l'élément racine du document, et ajoutez chaque élément ancêtre à un ensemble temporaire ; si un sélecteur est appliqué, ce dernier filtre le ensemble sur la base de ce sélecteur.
Retourne un objet jQuery contenant zéro ou un élément Retourne un objet jQuery contenant zéro, un ou plusieurs éléments

Voyez le fragment HTML suivant :

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" 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>

Exemple 1

Supposons que nous exécutions une recherche sur l'élément <ul> à partir de l'élément A :

$('li.item-a').closest('ul').css('background-color', 'red');

Essayez-le vous-même

Cela changera la couleur du <ul> de niveau-2, car il est le premier élément rencontré lors de la navigation vers le haut dans l'arbre DOM.

Exemple 2

Supposons que nous cherchions l'élément <li> :

$('li.item-a').closest('li').css('background-color', 'red');

Essayez-le vous-même

Cela changera la couleur de l'élément de liste A. Avant de naviguer dans l'arbre DOM, la méthode .closest() commence à chercher à partir de l'élément li lui-même, jusqu'à ce que le sélecteur corresponde à l'élément A.

Exemple 3

Nous pouvons passer un élément DOM en tant que contexte, dans lequel nous cherchons l'élément le plus proche.

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

Essayez-le vous-même

Le code ci-dessus changera la couleur du <ul> de niveau-2, car il est à la fois l'ascendant premier du <ul> de l'élément de liste A et l'ascendant du descendant de l'élément de liste II. Il ne changera pas la couleur du <ul> de niveau-1, car il n'est pas le descendant de l'élément de liste II.

Guide de遍历 jQuery