Javascript Cada Función

| | | | | | | | | | | | | | | | | | | | | |

jQuery each () es una forma concisa de iterar sobre elementos DOM. Cada método () está dise√±ado para ser llamado en el objeto jQuery de destino. Un objeto jQuery es un objeto que contiene uno o más elementos DOM y tiene acceso a los métodos jQuery. each () no solo es menos propenso a errores, sino que simplifica la manipulaciòn de varios elementos DOM.

jQuery each () requiere una funciòn de devoluciòn de llamada & mdash; una funciòn pasada a otra funciòn que se ejecutará más tarde. Dentro de la funciòn de devoluciòn de llamada se encuentra el acceso al n√∫mero de ìndice del elemento y al elemento en sì. Puede encontrar una revisiòn más completa de las funciones de devoluciòn de llamada aquì .

La aplicaciòn de each () es tan sencillo como cualquier bucle de JavaScript, pero hay algunos lugares para una posible confusiòn. Aclararemos estos puntos y examinaremos la sintaxis. Al final de esta guìa habrá ejemplos de còdigo paso a paso para ver diferentes formas de aplicar jQuery each ().

¿Qué es jQuery each ()?

jQuery cada uno es un método de bucle para la biblioteca jQuery. Funciona como un bucle de JavaScript iterando sobre elementos DOM. jQuery each () requiere una funciòn de devoluciòn de llamada, y dentro de la funciòn de devoluciòn de llamada es donde se pueden manipular los elementos DOM.

Mientras que dentro del cuerpo de la funciòn de devoluciòn de llamada, condicional Las declaraciones se pueden utilizar para cambiar algunos de los elementos seleccionados. declaraciones condicionales son declaraciones if & hellip; then en JavaScript. Esto proporciona un nivel más profundo de control sobre còmo se cambian exactamente los elementos.

jQuery each () Sintaxis

jQuery cada uno puede invocarse de dos formas. Primero, como un método llamado a un elemento seleccionado. La funciòn de devoluciòn de llamada acepta hasta dos argumentos opcionales: ìndice y valor. El ìndice es el n√∫mero de ìndice del elemento actual. Si el elemento actual fuera el primero en la lista, el n√∫mero de ìndice devolverìa 0.

El argumento de valor se refiere al elemento actual. Es importante tener en cuenta que para encadenar un método al valor se requiere envolver el valor en un selector de jQuery. Pongamos todo esto en un còdigo abstracto para podemos desglosar la sintaxis.

Aquì, seleccionamos cada "div" en la página y recorrerla. En cada iteraciòn, tenemos acceso a la posiciòn del ìndice y al valor del elemento actual. Devolver simplemente $ (valor) nos da el temido [objeto Objeto] valor.

Recuerde que [object Object] es una representaciòn de cadena de un objeto. Esto significa que necesitamos llamar a un método para extraer el valor exacto que queremos. En el caso anterior, estamos usando el método text () para revelar el atributo de texto del objeto. Lea más sobre [object Object] para tener una idea de lo que se devuelve exactamente.

El ejemplo anterior registrará el n√∫mero de ìndice seguido del atributo de texto para cada "div & gt ;. Si no necesitáramos acceso al ìndice, podrìamos refactorizar el còdigo como tal:

Al escribirlo asì, se registra el texto del "div" elemento también. En el ámbito de esta funciòn de devoluciòn de llamada, la palabra clave this también se refiere al elemento al que se hace referencia previamente por la variable de valor. Tenga en cuenta que no puede acceder a la palabra clave this en una funciòn de flecha.

Aunque las funciones de flecha son una alternativa compacta a escribir una funciòn, no se vincula a la palabra clave this . En otras palabras, el objeto devuelto al usar this en una funciòn de flecha no es lo que devuelve this cuando se escribe en notaciòn funcional.

Esta guìa cubre los entresijos de las funciones de flecha.

jQuery each () Ejemplos < / h2>

Expandamos los ejemplos de sintaxis anteriores y agreguemos algunos atributos. Comenzamos con una representaciòn HTML básica de una lista de colores que pertenecen a varias clases.

Este procesa cada elemento de texto en el DOM. Primero, comencemos simplemente registrando el texto en la consola usando ambas funciones de flecha y una funciòn tradicional. & nbsp;

Seleccionando solo "div & gt ; s con un nombre de clase de colorSelect, registramos el texto Rojo, Morado y Azul. Observe còmo estamos ajustando el valor en una nueva instancia de jQuery para llamar al método jQuery text (). Al hacerlo, solo se devolverá el texto de la "div" elementos. & nbsp;

Devolveremos los mismos resultados, pero utilizando la palabra clave this.

Podemos usar una funciòn anònima & mdash; una funciòn sin nombre, como la devoluciòn de llamada. Nuevamente, devuelve el texto Rojo, Morado y Azul. Vale la pena mencionar que aunque las funciones de flecha tienen alguna funcionalidad en jQuery, es una buena práctica usar la notaciòn funcional tradicional para las devoluciones de llamada de jQuery. & Nbsp;

Ahora sabemos còmo iterar sobre una colecciòn de elementos. ¬°Ahora, divirtámonos un poco y cambiemos el color!

Siguiendo con la página de la lista de colores, ahora hemos agregado algunas clases al "style" elemento & nbsp;.
YJ4bc FN1c Yp8hxU5xJt9D4AUh1FYRL0 3vsL0VFgqjSSntRQRKvrTIEOVLF5 YN2IHLXI0nhRbnUtiHUMy H5981aHAxKB5PpY3uFoL7 XELAFOHNo69ozfVUDFSg2QZKnd5I

En este ejemplo, hemos asignado el "div" s con la clase colorSelect el color azul. Podemos ponernos un poco elegantes y usar una declaraciòn condicional para cambiar solo dos de los tres seleccionados al color verde.

GSx7iO5YQAMHsYBc3LP5JuHkZ7tK0rrOPnU6KPYImAq MommcPYoCKn C L1FmREtH6HzyMDUDWvNVXQhaE1t9UkTfiQVUflVMMCNrp4I6l8EyDlgrZdhcDYMQHp4kS7NTVWe3U < / figure>

Llamamos a each () en los "div" s que coinciden con nuestro selector de clases. Luego usamos una declaraciòn condicional para verificar cada elemento seleccionado para ver si la propiedad del texto era " P√∫rpura. & Rdquo; En el cuerpo de la declaraciòn condicional, tenemos otra instancia de esto. & Nbsp;

A lo que se refiere esto en el cuerpo de la declaraciòn condicional son los atributos de texto en sì mismos que satisfacen la condiciòn. Seg√∫n nuestra salida, sabemos que esto en el cuerpo de los atributos de texto condicionalmente referidos "Rojo" y "Azul".

Dado que "Rojo" y "Azul" no son iguales a "P√∫rpura", utilizamos el método jQuery toggleClass para cambiar el original class a la clase green. Para obtener más informaciòn sobre jQuery toggleClass (), recomiendo leer este artìculo .

Conclusiòn & nbsp;

Cubrimos mucho terreno en esta guìa. Primero, aprendimos que jQuery cada () funciona de manera muy similar a cualquier otro iterador de JavaScript, solo para objetos jQuery. Luego cubrimos eso me las mejores prácticas de sintaxis y algunos problemas potenciales al escribir funciones de flecha y la notaciòn de funciòn tradicional. & nbsp;

En nuestros ejemplos, vimos còmo las funciones de flecha son √∫tiles, pero limitadas. Aquì tienes un recordatorio para ahorrarte el dolor de cabeza y utilizar la notaciòn funcional tradicional para todas las devoluciones de llamada de jQuery. & Nbsp;

Luego nos divertimos un poco y cambiamos los colores de los atributos del texto. Al usar una declaraciòn condicional en el cuerpo del bucle each (), vimos còmo podemos seleccionar y cambiar solo los elementos que satisfacen nuestra condiciòn. & Nbsp;

Ahora, depende de usted practicar sus nuevos patrones de bucle de jQuery encontrados. Empiece poco a poco y luego vaya aumentando hasta ver de qué es capaz todo jQuery each ().