.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 .each() de jQuery se utiliza para iterar sobre un conjunto de elementos y ejecutar una función para cada uno de ellos. Este método es muy útil cuando se necesita aplicar la misma lógica o manipulación a múltiples elementos del DOM.
Definición:
El método .each() itera sobre un objeto jQuery, ejecutando una función para cada elemento coincidente.
Sintaxis:
index.js
JavaScript
$(selector).each(function(index, element) {
// Código a ejecutar para cada elemento
});index: La posición del elemento actual en el conjunto de elementos.element: El elemento DOM actual.
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 .each() 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(){
$("#resaltarBtn").click(function(){
$("#listaEjemplo li").each(function(index, element){
$(element).addClass("resaltado");
});
});
$("#mostrarIndicesBtn").click(function(){
$("#listaEjemplo li").each(function(index, element){
$(element).text("Elemento de lista " + (index + 1));
});
});
});
</script>
</head>
<body>
<h1>Ejemplo de .each()</h1>
<ul id="listaEjemplo">
<li>Elemento de lista A</li>
<li>Elemento de lista B</li>
<li>Elemento de lista C</li>
</ul>
<button id="resaltarBtn">Resaltar Elementos de la Lista</button>
<button id="mostrarIndicesBtn">Mostrar Índices de los Elementos de la Lista</button>
</body>
</html>
index.js
JavaScript
$("#resaltarBtn").click(function(){
$("#listaEjemplo li").each(function(index, element){
$(element).addClass("resaltado");
});
});
$("#mostrarIndicesBtn").click(function(){
$("#listaEjemplo li").each(function(index, element){
$(element).text("Elemento de lista " + (index + 1));
});
});Explicación del Ejemplo:
- Al hacer clic en “Resaltar Elementos de la Lista”, se añade la clase “resaltado” a cada elemento de la lista con id
listaEjemplo, cambiando su fondo a amarillo. - Al hacer clic en “Mostrar Índices de los Elementos de la Lista”, se cambia el texto de cada elemento de la lista para mostrar su posición en el conjunto de elementos.
Resultado.
- Elemento de lista A
- Elemento de lista B
- Elemento de lista C
Notas adicionales:
- El método
.each()es muy flexible y puede ser utilizado para una amplia variedad de manipulaciones en los elementos del DOM. - Dentro de la función de iteración,
thisse refiere al elemento DOM actual, lo que permite realizar manipulaciones directamente sobre él.
Ejemplo avanzado:
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 avanzado de .each() en jQuery</title>
<style>
.cambiarColor {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#cambiarColorBtn").click(function(){
$("#listaAvanzada li").each(function(index, element){
if (index % 2 === 0) {
$(element).addClass("cambiarColor");
}
});
});
$("#mostrarTextoBtn").click(function(){
var textoCombinado = "";
$("#listaAvanzada li").each(function(index, element){
textoCombinado += $(element).text() + " ";
});
alert("Texto combinado: " + textoCombinado);
});
});
</script>
</head>
<body>
<h1>Ejemplo avanzado de .each()</h1>
<ul id="listaAvanzada">
<li>Elemento de lista A</li>
<li>Elemento de lista B</li>
<li>Elemento de lista C</li>
<li>Elemento de lista D</li>
</ul>
<button id="cambiarColorBtn">Cambiar Color de Elementos Pares</button>
<button id="mostrarTextoBtn">Mostrar Texto Combinado de la Lista</button>
</body>
</html>
index.js
JavaScript
$("#cambiarColorBtn").click(function(){
$("#listaAvanzada li").each(function(index, element){
if (index % 2 === 0) {
$(element).addClass("cambiarColor");
}
});
});
$("#mostrarTextoBtn").click(function(){
var textoCombinado = "";
$("#listaAvanzada li").each(function(index, element){
textoCombinado += $(element).text() + " ";
});
alert("Texto combinado: " + textoCombinado);
});Explicación del Ejemplo:
- Al hacer clic en “Cambiar Color de Elementos Pares”, se añade la clase “cambiarColor” a cada elemento par de la lista con id
listaAvanzada, cambiando su color de texto a rojo. - Al hacer clic en “Mostrar Texto Combinado de la Lista”, se obtiene y muestra el texto combinado de todos los elementos de la lista en una alerta.
Resultado.
- Elemento de lista A
- Elemento de lista B
- Elemento de lista C
- Elemento de lista D
