Parcourir jQuery - méthode is()

Manual de navegación de jQuery

Exemple

Retourne false, car l'élément parent de l'élément input est l'élément p :

  var isFormParent = $("input[type='checkbox']").parent();.is("form");
  $("div").text("isFormParent = " + isFormParent);

Pruebe por sí mismo

Définition et utilisation

is() détecte les éléments correspondants sur la base du sélecteur, de l'élément ou de l'objet jQuery, et retourne true si au moins un élément de ces éléments correspond aux paramètres donnés.

Syntaxe

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

Explication détaillée

Contrairement aux autres méthodes de filtrage, .is() ne crée pas de nouveau objet jQuery. Au lieu de cela, il nous permet de le détecter sans modifier le contenu de l'objet jQuery. Cela est généralement utile à l'intérieur d'un callback, comme un gestionnaire d'événement.

Supposons que nous ayons une liste où deux éléments contiennent des éléments enfants :

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>elemento de lista 3</li>
</ul>

Vous pouvez ajouter un gestionnaire d'événement click à l'élément <ul> et limiter le code à ce qui se déclenche uniquement lorsque l'élément de la liste lui-même, et non ses éléments enfants, est cliqué :

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
);

Pruebe por sí mismo

Maintenant, lorsque l'utilisateur clique sur le mot "list" du premier élément de la liste ou sur n'importe quel mot du troisième élément de la liste, l'élément de la liste cliqué est mis en arrière-plan rouge. Cependant, lorsqu'il clique sur "item 1" du premier élément de la liste ou sur n'importe quel mot du deuxième élément de la liste, il n'y a aucune modification, car dans ce cas, l'objectif de l'événement est <strong> est <span>.

Por favor, note que para expresiones de selectores de selector con posicionalidad, como :first, :gt() o :even, la filtración posicional es para el objeto jQuery transmitido a .is(), no para el documento que contiene. Por lo tanto, para el HTML anterior, la expresión $("li:first").is("li:last") devuelve true, pero $("li:first-child").is("li:last-child") devuelve false.

Usar una función

Una segunda forma de uso de este método es evaluar expresiones de elementos relacionados basadas en funciones en lugar de selectores. Para cada elemento, si la función devuelve true, .is() también devuelve true. Por ejemplo, aquí hay un fragmento de HTML un poco más complejo:

<ul>
  <li><strong>lista</strong> elemento 1 - una etiqueta strong</li>
  <li><strong>lista</strong> elemento <strong>2</strong> -
    dos <span>etiquetas strong</span></li>
  <li>elemento de lista 3</li>
  <li>elemento de lista 4</li>
  <li>elemento de lista 5</li>
</ul>

Puede agregar un programa de manejo de clics a cada <li> para calcular el número de elementos <strong>internos al <li> que se han hecho clic:

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    };
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
);

Pruebe por sí mismo

Manual de navegación de jQuery