El método .find() de jQuery se utiliza para buscar todos los elementos descendientes que coinciden con un selector dentro de los elementos seleccionados. Es especialmente útil para restringir una búsqueda de elementos a un subárbol específico del DOM.
Definición:
El método .find() recorre todos los elementos descendientes de los elementos seleccionados, devolviendo todos los elementos que coinciden con el selector especificado.
Sintaxis:
$(selector).find(selector)selector: Un selector de jQuery que selecciona los elementos dentro de los elementos previamente seleccionados.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .find() en jQuery</title>
<style>
.resaltado {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#contenedor").find("p").addClass("resaltado");
});
</script>
</head>
<body>
<h1>Ejemplo de .find()</h1>
<div id="contenedor">
<p>Este párrafo será resaltado.</p>
<div>
<p>Este párrafo también será resaltado.</p>
</div>
</div>
<p>Este párrafo no será resaltado.</p>
</body>
</html>$("#contenedor").find("p").addClass("resaltado");Explicación del Ejemplo:
En este ejemplo, el método .find("p") se utiliza para buscar todos los elementos <p> dentro del div con el id “contenedor”. Luego, se añade la clase “resaltado” a estos párrafos, lo que cambia su fondo a amarillo. El párrafo fuera del contenedor no es afectado.
Resultado.
Este párrafo será resaltado.
Este párrafo también será resaltado.
Este párrafo no será resaltado.
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.
Leer más
