Sentencia Each

[Burguito]

Buenas tardes a todos,

Le escribo para pedirle ayuda, ya que tengo un mes tratando de resolver un problema de Jquery por mi solo, pero no le he podido llegar a la solucion y lo que necesito hacer es lo siguiente:

Tengo un arreglo con imágenes viñetas. Los archivos de las imágenes se encuentran en una carpeta img/minis y son de 60x60 pixeles y necesito colocarlas dentro de un ciclo “each” cargar para cada división con “Brand” la imagen.

Tengo que utilizar el selector $(this) y cargar la etiqueta con la función html y a cada imagen hay que asignarle un ancho y un alto de 50 pixeles.

Aqui les comparto mi codigo:

var productos = new Array("afrodita.png",
"arpia.jpg",
"basilisco.jpg",
"caballo.jpg",
"centauro.jpg",
"fenix.jpg",
"gea.jpg",
"grifo.png",
"hidra.gif",
"kraken.jpg",
"medusa.png",
"minotauro.jpg",
"pegaso.jpg",
"poseidon.jpg",
"quimera.jpg",
"satiro.jpg",
"unicornio.jpg"
);
var t="";
window.onload=function(){
//Cargar las imágenes en las divisiones
$(".Brand").each(function(i,elemento){
i=0;
$(this).html("<img src='img/minis/'"+productos[i]+">").width(50).height(50);
i++;
});


Quedo atento a sus respuestas.

Saludos,
JB

[Alexis88]

En lugar de establecer las dimensiones imagen por imagen, mejor asígnales una clase y, en la hoja de estilos, establece las dimensiones:

Código Javascript:

$(this).html("<img src='img/minis/'"+productos[i]+" class='foo' />")
 

Código CSS:

.foo{
    width: 50px;
    height: 50px;
}
 

Por cierto, puedes utilizar el primero de los dos argumentos del callback del método .each() para evitar tener que utilizar un contador para obtener los valores del arreglo. Es esa i que está antes de elemento. Quedaría así:

Código Javascript:

$(".Brand").each(function(i){
    $(this).html("<img src='img/minis/'"+productos[i]+" class='foo' />");
});