Let’s take a simple example:
I’m not saying you would actually try to code things as I did in the example, but what are some other ways to do the same thing that would avoid this problem? Here are just a few other examples that you might consider:
1. Bypass using the loop entirely
jQuery makes it super easy to just skip the whole looping mess using the power of CSS selectors and the
on() function. Without a loop or counter, we can use jQuery’s
index() function to alert the index as we were trying to do in the first example too. try it
2. Use function closures
The first example works, but what if you still want to do things using a loop? Since the problem stems from the variable reference problem, using closures will safely protect the variable values and properly give you the expected result. try it
3. Use a separate function
If you don’t like using closures for whatever reason, defining a separate outside function also achieves the same result. This approach might even be a bit cleaner and/or reusable. try it
What are some ways you have solved this type of problem? I’d love to hear from our readers to see how they might have done things differently!
For further reading on this topic, I found this article rather interesting.