.has()

El método .has() en jQuery se utiliza para filtrar un conjunto de elementos, devolviendo aquellos que contienen un descendiente que coincide con el selector especificado. Es útil cuando necesitas seleccionar elementos que contienen ciertos elementos hijos.

Definición del método `.has()`

El método .has() selecciona los elementos del conjunto original que contienen al menos un elemento descendiente que coincide con el selector especificado.

Sintaxis:

index.js

index.js

JavaScript

$(selector).has(descendantSelector);

selector: Un selector que define el conjunto de elementos a los que se aplicará el método.
descendantSelector: Un selector que define los elementos descendientes que se buscan dentro de los elementos del conjunto original.

Ejemplos completos en HTML.

Ejemplo 1: Filtrar elementos que contienen un párrafo.

index.html

index.html

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de has() con párrafos.</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .resaltado-amarillo {
            background-color: yellow;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#resaltarDivs").click(function() {
                // Filtra los divs dentro del contenedor específico que contienen al menos un párrafo
                $("#contenedor div").has("p").addClass("resaltado-amarillo");
            });
        });
    </script>
</head>
<body>
    <div id="contenedor">
        <div id="contenedor1">
            <p>Párrafo en contenedor 1.</p>
        </div>
        <div id="contenedor2">
            Contenedor 2 sin párrafo.
        </div>
        <div id="contenedor3">
            <p>Párrafo en contenedor 3.</p>
        </div>
    </div>
    <button id="resaltarDivs">Resaltar Divs con Párrafos</button>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de has() con párrafos.</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .resaltado-amarillo {
            background-color: yellow;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#resaltarDivs").click(function() {
                // Filtra los divs dentro del contenedor específico que contienen al menos un párrafo
                $("#contenedor div").has("p").addClass("resaltado-amarillo");
            });
        });
    </script>
</head>
<body>
    <div id="contenedor">
        <div id="contenedor1">
            <p>Párrafo en contenedor 1.</p>
        </div>
        <div id="contenedor2">
            Contenedor 2 sin párrafo.
        </div>
        <div id="contenedor3">
            <p>Párrafo en contenedor 3.</p>
        </div>
    </div>
    <button id="resaltarDivs">Resaltar Divs con Párrafos</button>
</body>
</html>

index.js

index.js

JavaScript

// Filtra los divs dentro del contenedor específico que contienen al menos un párrafo
$("#contenedor div").has("p").addClass("resaltado-amarillo");

Explicación del Ejemplo 1:

Al hacer clic en el botón “Resaltar Divs con Párrafos”, se filtran los div dentro del div con el id contenedor que contienen al menos un párrafo (<p>) y se les añade la clase resaltado-amarillo, que cambia el fondo a amarillo.

Resultado.

Párrafo en contenedor 1.

Contenedor 2 sin párrafo.

Párrafo en contenedor 3.

Ejemplo 2: Filtrar elementos que contienen una lista desordenada.

index.html

index.html

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de has() con listas.</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .resaltado-azul {
            background-color: lightblue;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#resaltarDivsConListas").click(function() {
                // Filtra los divs dentro del contenedor específico que contienen al menos una lista desordenada
                $("#contenedor div").has("ul").addClass("resaltado-azul");
            });
        });
    </script>
</head>
<body>
    <div id="contenedor">
        <div id="contenedor1">
            <ul>
                <li>Elemento 1</li>
                <li>Elemento 2</li>
            </ul>
        </div>
        <div id="contenedor2">
            Contenedor 2 sin lista.
        </div>
        <div id="contenedor3">
            <ul>
                <li>Elemento A</li>
                <li>Elemento B</li>
            </ul>
        </div>
    </div>
    <button id="resaltarDivsConListas">Resaltar Divs con Listas</button>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de has() con listas.</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .resaltado-azul {
            background-color: lightblue;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#resaltarDivsConListas").click(function() {
                // Filtra los divs dentro del contenedor específico que contienen al menos una lista desordenada
                $("#contenedor div").has("ul").addClass("resaltado-azul");
            });
        });
    </script>
</head>
<body>
    <div id="contenedor">
        <div id="contenedor1">
            <ul>
                <li>Elemento 1</li>
                <li>Elemento 2</li>
            </ul>
        </div>
        <div id="contenedor2">
            Contenedor 2 sin lista.
        </div>
        <div id="contenedor3">
            <ul>
                <li>Elemento A</li>
                <li>Elemento B</li>
            </ul>
        </div>
    </div>
    <button id="resaltarDivsConListas">Resaltar Divs con Listas</button>
</body>
</html>

index.js

index.js

JavaScript

// Filtra los divs dentro del contenedor específico que contienen al menos una lista desordenada
$("#contenedor div").has("ul").addClass("resaltado-azul");

Explicación del Ejemplo 2:

Al hacer clic en el botón “Resaltar Divs con Listas”, se filtran los div dentro del div con el id contenedor que contienen al menos una lista desordenada (<ul>) y se les añade la clase resaltado-azul, que cambia el fondo a azul claro.

Resultado.

Elemento 1
Elemento 2

Contenedor 2 sin lista.

Elemento A
Elemento B

jQuery.com

Material de jQuery.com

Contenido Relacionado.

.addClass()

.addClass() de jQuery agrega clases CSS a los elementos seleccionados, permitiendo aplicar estilos específicos sin modificar el HTML o CSS existente.

Edgar Sandoval25 de julio de 2024

.click()

.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.

Edgar Sandoval26 de julio de 2024

.ready()

.ready() ejecuta JavaScript cuando el DOM está cargado y listo, asegurando que el código no se ejecute antes de que existan los elementos del DOM.

Edgar Sandoval27 de julio de 2024

selector

Los selectores en jQuery son patrones para seleccionar elementos del DOM, permitiendo aplicar efectos, manipular propiedades o agregar eventos, similar a los selectores en CSS.

Edgar Sandoval27 de julio de 2024