.addClass() de jQuery agrega clases CSS a los elementos seleccionados, permitiendo aplicar estilos específicos sin modificar el HTML o CSS existente.
Leer másMétodos.
Métodos.
El método .end() de jQuery permite revertir la última operación de filtrado dentro de una cadena de métodos. Esto hace que el conjunto de elementos seleccionados regrese a su estado original, facilitando trabajar nuevamente con todos los elementos después de aplicar un filtro.
Definición:
Con el método .end(), puedes deshacer la última operación de filtrado y recuperar el conjunto completo de elementos seleccionados previamente.
Sintaxis:
index.js
JavaScript
$(selector).action().end();selector: Un selector que indica los elementos sobre los que se realizará la acción inicial.action: La acción que se aplicará a los elementos seleccionados.
Ejemplo:
Revertir un filtrado con .end().
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo .end().</title>
<style>
.resaltado {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonResaltar").click(function() {
// Selecciona todos los párrafos, filtra el primero y le aplica una clase. Luego, vuelve al conjunto original y aplica otro estilo a todos los párrafos.
$("p").first().addClass("resaltado").end().css("font-weight", "bold");
});
});
</script>
</head>
<body>
<button id="botonResaltar">Resaltar Párrafos</button>
<p>Párrafo 1: Este es el primer párrafo.</p>
<p>Párrafo 2: Este es el segundo párrafo.</p>
<p>Párrafo 3: Este es el tercer párrafo.</p>
</body>
</html>
index.js
JavaScript
// Selecciona todos los párrafos, filtra el primero y le aplica una clase. Luego, vuelve al conjunto original y aplica otro estilo a todos los párrafos.
$("p").first().addClass("resaltado").end().css("font-weight", "bold");Explicación del Ejemplo:
En el ejemplo, se tienen tres párrafos en la página. Al hacer clic en el botón “Resaltar Párrafos”, se realiza una acción que:
- Selecciona todos los párrafos usando
$("p"). - Aplica la clase
resaltadoal primer párrafo con.first(), cambiando su fondo a amarillo. - Usa
.end()para volver al conjunto original de todos los párrafos. - Estiliza todos los párrafos con un texto en negrita usando
.css("font-weight", "bold").
Resultado.
Párrafo 1: Este es el primer párrafo.
Párrafo 2: Este es el segundo párrafo.
Párrafo 3: Este es el tercer párrafo.
