onClick event in a For loop

by

John Resig covers this topic very well in “Secrets of the JavaScript Ninja” ( http://ejohn.org/apps/learn/#59 )

You’ll need to create a temporary scope to preserve i’s value

for ( var i = 0; i < itemLists.length; i++ ) (function(i){ 
  itemLists[i].onclick = function() {
      // do something
  }
})(i);

Edit:

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9
$listParent = $('game').find('ul'), // li's parent
itemLists = $('game').getElementsByTagName('li'); // 9 items

var listHandler = (function() {
  var i = 0;

  return function() {
    // $(this) will in here refer to the clicked li
    i++ // increment i

    if ( i === 9 ) {
      $listParent.off('click', 'li', listHandler); //remove eventhandler when i reaches 9
    }
  }
}());

$listParent.on('click', 'li', listHandler); // attach eventhandler to ul element

This should do what you want, cant test it right now since I’m at work.

More Related Contents:

  1. I want to print odd numbers using javascript [closed]
  2. adding array elements with for loop JavaScript
  3. Better to have ajax inside or outside for-loop or for-loop at the server side? Javascript [closed]
  4. Loop through an array in JavaScript
  5. What is the difference between ( for… in ) and ( for… of ) statements?
  6. How to get the selected radio button’s value?
  7. Why is my function call that should be scheduled by setTimeout executed immediately? [duplicate]
  8. Calling an asynchronous function within a for loop in JavaScript
  9. Javascript efficiency: ‘for’ vs ‘forEach’ [closed]
  10. Are loops really faster in reverse?
  11. Check if object value exists within a Javascript array of objects and if not add a new object to array
  12. JavaScript Loops: for…in vs for
  13. Get loop counter/index using for…of syntax in JavaScript
  14. JavaScript loop variable scope
  15. ECMAScript 2015: const in for loops
  16. How to use setInterval function within for loop
  17. javascript for loop counter coming out as string [duplicate]
  18. How do I group items in an array by date?
  19. Loop in Jade (currently known as “Pug”) template engine
  20. Strange behavior in Javascript enhanced for…in loop
  21. Is optimizing JavaScript for loops really necessary?
  22. Two arrays, where items in array x can be in array y but not vice versa, test all permutations
  23. Iterating a JavaScript object’s properties using jQuery
  24. For-loop performance: storing array length in a variable
  25. JavaScript for loop index strangeness [duplicate]
  26. How to display pyramid using JavaScript?
  27. Javascript: hiding prototype methods in for loop?
  28. Sum values from an array of key-value pairs in JavaScript
  29. Difference between ( for… in ) and ( for… of ) statements?
  30. How to loop through key/value object in Javascript? [duplicate]

Leave a Comment