Exploración de jQuery - método is()

Manual de referencias de jQuery para la navegación

Ejemplo

Devuelve false, porque el elemento padre del input es el elemento p:

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

Pruebe usted mismo

Definición y uso

is() detecta conjuntos de elementos que coinciden con un selector, un elemento o un objeto jQuery, y devuelve true si al menos uno de estos elementos coincide con el parámetro dado.

Sintaxis

.is(selector)
Parámetros Descripción
selector Valor de cadena que contiene la expresión de selector de elementos que coinciden.

Descripción detallada

A diferencia de otros métodos de filtrado, .is() no crea un nuevo objeto jQuery. En su lugar, permite que realicemos la detección en el objeto jQuery sin modificar su contenido. Esto es útil dentro de callbacks, como los administradores de eventos.

Supongamos que tenemos una lista donde dos proyectos contienen elementos secundarios:

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

Puede agregar un administrador de eventos de clic al elemento <ul> y luego limitar el código para que solo se dispare cuando se haga clic en el elemento de la lista en sí, no en los elementos secundarios:

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

Pruebe usted mismo

Ahora, cuando el usuario hace clic en la palabra "list" del primer elemento de la lista o en cualquier palabra del tercer elemento de la lista, el elemento de la lista que se hace clic se establece con un fondo rojo. Sin embargo, cuando el usuario hace clic en "item 1" del primer elemento de la lista o en cualquier palabra del segundo elemento de la lista, no habrá ningún cambio, porque en estos casos, el objetivo del evento es <strong>es <span>.

Por favor, tenga en cuenta que para expresiones de selector de selector con posición, como :first, :gt() o :even, la filtración de posición es para el objeto jQuery transmitido a .is(), no para el documento. 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.

Usando una función

La 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 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 eventos de clic 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 usted mismo

Manual de referencias de jQuery para la navegación