¡Otro video conceptual! Esta es "solo una de esas cosas" que debe comprender en jQuery. En realidad, es un poco exclusivo de jQuery, ya que otras bibliotecas populares de JavaScript en el pasado no lo han hecho de esta manera.
Ya hemos cubierto bastante los selectores. Por ejemplo, ya sabe que $("p")
seleccionará todos los párrafos de una página. No solo el primero o alguno al azar, todos. Puede imaginar fácilmente que puede haber muchos de estos en una página. Ahora imagina lo que sucede cuando lo haces:
$("p").hide();
Todos se ocultan, ¿verdad? Correcto. No el primero ni alguno al azar, todos. Esa iteración implícita . Detrás de escena, jQuery recorre automáticamente todo el conjunto de elementos que encontró y ejecuta el método que ha elegido en ellos. Literalmente, no necesitamos escribir un bucle nosotros mismos para hacer esto. Parece bastante obvio si su introducción a JavaScript es jQuery, pero muchas bibliotecas en el pasado han requerido que usted mismo recorra las colecciones de elementos.
Si lo desea, aún puede escribir el bucle usted mismo. Eso quizás se vería así, usando métodos de bucle de jQuery:
$("p").each(function() ( $(this).hide(); ));
Eso es casi lo mismo. No necesariamente, pero podrías. Eso es iteración explícita .
A veces necesitas hacer una iteración explícita. Básicamente, si necesitamos acceder al valor de this
y hacer algo especial con él, necesitaremos nuestra propia construcción de bucle para trabajar.
El ejemplo en este screencast fue contar los caracteres en los elementos de la lista y agregarlos al final de la cadena. Necesitaremos una iteración explícita para eso.
Vea el lápiz 4b53b9f55662d0d26339e18277500eee de Chris Coyier (@chriscoyier) en CodePen
Usamos el método each () de jQuery aquí, que es perfecto para lo que necesitamos. Una parte útil que nos brinda es un contador indexado a cero en cada iteración a la que podemos acceder si es necesario.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2