Objetos y Funciones Diferidas en jQuery
/

Encontrar un elemento del DOM según un criterio en jQuery

Dentro del capítulo de filtrado del DOM encontramos la posibilidad de verificar si una selección jQueri responde o no a un criterio especificado en el argumento de la expresión. Obtenemos una respuesta que corresponde a verdadero o falso.

El método que utilizamos es:

is (expresión) 

  • expresión (cadena de caracteres): es una expresión que corresponde al criterio que se va a comprobar.

Ejemplo de uso

$(":checkbox").parent().is("form"); Este método devuelve un booleano

Desde la versión 1.6 de jQuery, un elemento del DOM o un objeto jQuery también puede utilizarse como selector.

Ejemplos de uso

$("p").is("document.getElementById("unico"));

$("p").is($("#unico));

En ambos casos se comprueba si la selección es el elemento identificado por el id=’unico’

Ejemplo:  Demostración de is ()


De una lista de cinco elementos, después de hacer clic en un elemento de la lista añadir un color de fondo.

código

<!DOCTYPE html>
<html lang="es">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Demostración de is - Altruistas jQuery</title>
   <script src="../js/jquery.js"></script>
   <script>
      $(document).ready(function(){
         $("ul").click(function(event){
            if ($(event.target).is("li")){
               $(event.target).addClass('azul');
            }
         });
       });
   </script>
   <style>
      .azul {
         background-color: #9cf;
      }
      li {
         width: 120px;
         cursor:pointer;
      }
   </style>
</head>
<body>
   <p>Demostración de <code>is ()</code>:</p>
   <ul>
      <li>Ítem de lista 1</li>
      <li>Ítem de lista 2</li>
      <li>Ítem de lista 3</li>
      <li>Ítem de lista 4</li>
      <li>Ítem de lista 5</li>
   </ul>
</body>
</html>

ejecutar el ejemplo

Comentario

Cuando el DOM está cargado y se hace clic en un elemento de la lista no ordenada ‘ul’

$(document).ready(function(){
$("ul").click(function(event){

si el clic (event.target) proviene de uno de sus ‘li’ se ejecuta la adición de la clase ‘azul’ añadiendo un color de fondo.

if ($(event.target).is("li")){
$(event.target).addClass('azul');

Deja una respuesta

Your email address will not be published.

Objetos y Funciones Diferidas en jQuery
Anterior post

El efecto de desplazamiento vertical en jQuery

html5 y css3
Siguiente post

Animaciones con CSS3 y HTML5