.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 .eq() de jQuery se utiliza para seleccionar un elemento específico de un conjunto de elementos coincidentes basado en su índice. Esto es útil cuando necesitas trabajar con un elemento particular dentro de un grupo seleccionado.
Definición:
El método .eq() de jQuery selecciona un solo elemento del conjunto de elementos coincidentes, basado en el índice proporcionado.
Sintaxis:
index.js
JavaScript
$(selector).eq(index);selector: Un selector que define el conjunto de elementos del cual se seleccionará uno en particular.index: Un número entero que indica la posición del elemento a seleccionar (el índice es cero basado).
Ejemplo:
Seleccionar y estilizar un párrafo específico.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo .eq().</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 el segundo párrafo (índice 1) y le aplica la clase "resaltado"
$("p").eq(1).addClass("resaltado");
});
});
</script>
</head>
<body>
<button id="botonResaltar">Resaltar Segundo Párrafo</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 el segundo párrafo (índice 1) y le aplica la clase "resaltado"
$("p").eq(1).addClass("resaltado");Explicación del Ejemplo:
En el ejemplo, tenemos tres párrafos en la página. Al hacer clic en el botón “Resaltar Segundo Párrafo”, se ejecuta una función que:
- Selecciona todos los párrafos con
$("p"). - Usa
.eq(1)para seleccionar el segundo párrafo (índice 1). - Aplica la clase
resaltadoal segundo párrafo, cambiando su fondo a amarillo.
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.
