For each div load image loads image number twice

Question

I'm dynamically loading images in a grid, which displays images with a link to some lightbox. This is the way im currently doing it:

$(".selection_thumb").each( function(i) {
    $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++i)+".jpg'><img src='img/folder/"+(++i)+".jpg' alt='alttext' /></a>");  
});

But it seems to be loading this:

<a data-lightbox="image-1" href="img/folder/folder/1.jpg"><img src="img/folder/2.jpg" alt="alttext" /></a>

But it needs to be:

<a data-lightbox="image-1" href="img/folder/folder/1.jpg"><img src="img/folder/1.jpg" alt="alttext" /></a>

So it is loading different numbers 1 and 2 instead of 1 and 1.

Any help is appreciated

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

You need to use i++ not ++i because ++i adds diferently

++i returns the value of i after it has been incremented. i++ returns the value of i before incrementing.

Quoted from What's the difference between ++i and i++ in JavaScript

edited May 23 '17 at 12:05

Community

1
1

answered Feb 13 '14 at 12:52

Anton

32,245
5
44
54

1

Thanks, that worked can't verify your answer yet ( but will do so in a few min ) – user2099810 Feb 13 '14 at 12:53

score 1 · Accepted Answer · answered Feb 13 '14 at 12:52

1

Try,

var cache = null;

$(".selection_thumb").each( function(i) {
    cache = ++i; 
    $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+ cache +".jpg'><img src='img/folder/"+ cache  +".jpg' alt='alttext' /></a>");  
});

answered Feb 13 '14 at 12:52

Rajaprabhu Aravindasamy

66,513
17
101
130

1

Thanks that also worked, neither can i verify your answer but will do so in a few min – user2099810 Feb 13 '14 at 12:54
@user2099810 Glad to help.! you can accept any one of the answer as per your wish.! :) – Rajaprabhu Aravindasamy Feb 13 '14 at 12:55
I meant accepting your answer by clicking the V it has a 14min wait or so hehe – user2099810 Feb 13 '14 at 12:57

For each div load image loads image number twice

2 Answers2