Para realizar una acción parecida varias veces tendrás que hacer algún tipo de bucle. Para este ejemplo vamos a usar un bucle for normal, pero lo podrías hacer igualmente con forEach como te han indicado en el comentario.
Cuando haces un bucle for, lo que tienes que identificar, es:
- Cual es la parte "igual" que tengo que repetir siempre
- Cuál es la parte "diferente" que tengo que cambiar a cada iteración.
En tu caso la parte diferente es el número de la posición del array: maleImages[0]
, maleImages[1]
, etc. Pero el resto de la sentencia ($thumbNav.append...
) es siempre lo mismo.
Una vez identificadas esas dos partes, tienes que pensar
- Desde dónde inicia la parte "diferente"
- Cuándo acaba esa parte
- De cuánto en cuanto se incrementa tus itertaciones.
En tu caso siempre se inicia desde cero, y acaba en tanto lo largo que sea tu array menos uno. Por ejemplo para tu array de 3 elementos acabas en el 2 (por que vas del 0 al 2), si tuviera 10 elementos acabarías en el 9. Por último sabes que ese valor se incrementa de uno en uno, ya que empiezas en 0, después sigues con el 1, el 2, etc.
Con todo esto ya puedes montar tu bucle:
for (var i = 0; i < maleImages.length; i++) {
$thumbNav.append('<img src="' + maleImages[i] + '">');
}
¿Qué significa todo esto?. Primero declaras un bucle for. Inicialmente creas una variable de nombre i
que valdrá 0 al principio. A cada iteración irá variando de 0, 1, 2, etc. Ese es el valor que luego sustituirás al hacer maleImages[i]
en la siguiente línea.
La segunda parte del for indica cuál es la condición de parada del bucle para que no se ejecute indefinidamente. En tu caso se ejecutará mientras que i
sea menor que la longitud del array. Por lo que si tu array tiene 3 elementos e i
tiene el valor 2 te dejará continuar, pero cuando valga 3 parará ya que 3 no es menor que 3 (es igual vaya).
La última parte del for es la que va cambiando el valor de i
. Como hacemos incrementos de 1 en uno usamos i++
que sirve para sumar 1 al valor actual de i.