binding inside a loop

binding inside a loop

hello -

i currently have this code:

  1. jQuery('div.One').bind('click', function() { myFunction(1);  });  
  2. jQuery('div.Two').bind('click', function() { myFunction(2);  }); 
  3. jQuery('div.Three').bind('click', function() { myFunction(3);  }); 

this works great, as does this method (probably the same thing)

  1. jQuery('div.One').click(function() {    myFunction(1);  });
  2. jQuery('div.Two').click(function() {    myFunction(2);  });


i am currently trying to put these values into a object and loop through it like so:

  1. var marksObject =
  2. ( 'One'     :  1
  3. , 'Two'     :  2
  4. , 'Three'   : 3
  5. };
  6. for ( key in marksObject ) {
  7.     className = 'div.' + key;
  8.     idNbr = marksObject[key];
  9.     jQuery(className).bind('click', function() { myFunction(idNbr);  });
  10. }

my problem is that EVERY div ends up being bound to the LAST entry in marksObject.

in other words, "div.One", "div.Two", and "div.Three" all end up binded using a value of 3.

i suspect there is an easy solution or workaround to this.

thank you all very much.