Loop through an array using each jquery

Question

HTML:

<div id="background_cycler">
    <img class="active" src="" alt=""/>
    <img src="" alt=""   />
    <img src="" alt=""  />
    <img src="" alt=""/>        
</div>

jQuery:

var bgImg = [
'img/bg1.jpg',
'img/bg2.jpg',
'img/bg3.jpg',
'img/bg4.jpg'
];

$("#background_cycler").each(function(index){
    $(this).find('img').attr("src", bgImg[index]);
});

The above code inserted bg1.jpg into all of my images, where is my mistake? I thought I loop through the bgImg array using each()'s index?

because you are selecting with id...selector will return first matched element with given id — Rakesh_Kumar
– Rakesh_Kumar, Commented Mar 6, 2015 at 10:04

Sadikhasan · Accepted Answer · 2015-03-06 10:03:10Z

3

You have to iterate all images inside background_cycler div like

$("#background_cycler img").each(function(index){
    $(this).attr("src", bgImg[index]);
});

You are using background_cycler id as selector so it is find first image from div but you need all images inside background_cycler div so you need to loop using $("#background_cycler img").each as described above.

answered Mar 6, 2015 at 10:03

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shishdem Over a year ago

This is the correct answer and should be marked accordingly by @Elton Jamie.

Collectives™ on Stack Overflow

Loop through an array using each jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related