.addClass() de jQuery agrega clases CSS a los elementos seleccionados, permitiendo aplicar estilos específicos sin modificar el HTML o CSS existente.
Leer másContenido.
Contenido.
El método .closest() de jQuery se utiliza para encontrar el ancestro más cercano de los elementos seleccionados que coincida con el selector especificado. Este método es útil para buscar en la jerarquía de elementos hacia arriba y encontrar el primer elemento que cumpla con el criterio dado.
Definición:
El método .closest() comienza desde el elemento actual y recorre sus ancestros en el DOM hacia arriba hasta encontrar el primero que coincida con el selector. Si no encuentra ningún ancestro que coincida, devuelve un objeto jQuery vacío.
Sintaxis:
ejemplo.js
JavaScript
$(selector).closest(selector)selector: Un selector de jQuery que se utiliza para buscar el ancestro más cercano.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .closest() en jQuery</title>
<style>
.contenedor {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
.resaltado {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$(".hijo").click(function(){
$(this).closest(".contenedor").addClass("resaltado");
});
});
</script>
</head>
<body>
<div class="contenedor">
<div class="subcontenedor">
<p class="hijo">Haz clic en mí</p>
</div>
</div>
<div class="contenedor">
<div class="subcontenedor">
<p class="hijo">Haz clic en mí también</p>
</div>
</div>
</body>
</html>
index.js
JavaScript
$(this).closest(".contenedor").addClass("resaltado");Explicación del Ejemplo:
En este ejemplo, al hacer clic en un elemento <p> con la clase “hijo”, el método .closest() busca el ancestro más cercano con la clase “contenedor”. Una vez encontrado, se le agrega la clase “resaltado”, que cambia el fondo del contenedor a amarillo. Esto permite que solo el contenedor más cercano al elemento clickeado se resalte.
Resultado.
Haz clic en mí
Haz clic en mí también
jQuery.com
Contenido Relacionado.
Suscribirse
0 Comentarios
Más antiguo