jQuery for loop dynamic value

Question

Ive got a problem with the following loop:

for (var i = 0; i < dataElements; ++i){
  d=document.createElement('div');
  $(d).addClass('overviewbit')
  .appendTo('.overview')
  .click(function(){
    id = i;
  });
}

Every Div sets id to the highest value of the loop but i should be the exact value i gets when its created. So the first div should set it to 1, the second div should set it to 2 and so on. i hope you understand my problem and could help me to find a solution.

score 5 · Accepted Answer · edited May 23 '17 at 12:19

This a common problem. When you create the click handler, it's setting id to i -- the variable, not the value i was storing at the time.

The for loop is completing before any of the DIVs are clicked, so i is equal to the final value from the loop for all the click handlers, and as a result all the ids are set to the same value.

With jQuery you can solve this problem by using .data() storage:

for (var i=0; i<dataElements; ++i){
    d=document.createElement('div');
    $(d).addClass('overviewbit')
        .appendTo('.overview')
        .data('val',i)
        .click(function(){
                id = $(this).data('val'); 
            });
}

However, to do things the "proper" way you would use a JavaScript closure:

for (var i=0; i<dataElements; ++i){
    d=document.createElement('div');
    $(d).addClass('overviewbit')
        .appendTo('.overview')
        .data('val',i)
        .click((function(j){
                return function() { id = j; }
            })(i));
}

Id can't start with a number. You'll have to add a prefix to it, then slice on click, if needed. But it's a +1, tough — Ortiga, Oct 13 '11 at 17:35
good point -- although some browsers seem to allow numerical IDs, the HTML spec says they shouldn't. — Blazemonger, Oct 13 '11 at 17:40
id is just some variable, not the id of the div. or at least that's how I read the OP. — Andrew, Oct 13 '11 at 17:42

score 1 · Answer 2 · answered Oct 13 '11 at 17:34

I don't quite understand what you're asking, does this do what you want

for (var i = 0; i < dataElements; ++i){
  d=document.createElement('div');
  $(d).addClass('overviewbit')
  .appendTo('.overview')
  .data("id", i)
  .click(function(){
    id = $(this).data("id");
  });
}

score 1 · Answer 3 · answered Oct 13 '11 at 17:34

1

You can use this instead,

$.each(dataElements, function(i, el){
  $('<div class="overviewbit"></div>').appendTo('.overview')
  .click(function(){
    id = i;
  });
});

answered Oct 13 '11 at 17:34

Andrew

13,757
13
66
84

score 1 · Answer 4 · answered Oct 13 '11 at 17:37

This is because when your click function occurs, the loop has already completed. The order jQuery sees it in is:

Loop through, creating and appending the divs.
Loop is done- i is set to the highest value.
A click event occurs. It is at this point that jQuery sets id = i. But since the loop completed first, i is the highest value.

To fix this, you need to set i as a local variable inside the for loop (look into javascript closures):

for (var i = 0; i < dataElements; ++i){
    d=document.createElement('div');
    var myId = i;
    $(d).addClass('overviewbit')
    .appendTo('.overview')
    .click(function(){
          id = myId;
    });
}

You may also want to look at jQuery's each method.

Your solution does not work: http://jsfiddle.net/mblase75/BqD5V/1/ -- a closure is necessary instead. — Blazemonger, Oct 13 '11 at 17:53

score 0 · Answer 5 · answered Oct 13 '11 at 17:37

The issue you are having is the click function does not get evaluated until you actually click that element. This event will probably happen after the for loop is finished. This means i will always be dataElements.length since by the time the click is evaluated the i has been set to the highest index and will remain that way for the remainder of its life.

jQuery for loop dynamic value

5 Answers5

Linked