Help with simple javascript loop

Question

I have a simple javascript that I'd like to loop for multiple elements. Here's my code:

<script type='text/javascript'>  
for(i = 1; i < 100; i++)
{
$('#link'+i).click(function() {
    $('#container').removeClass();
    $('#container').addClass('templateid'+i);
});
}
</script>

What I'd like to achieve is the same addClass function for multiple id's (e.g. link2, link3, link4), with the corresponding class (e.g. template2, template3, template4).

Any help would be hugely appreciated!

For reference, an individual call like this one, does work, so I don't see why the loop above doesn't function the same:

<script type='text/javascript'> 
$('#link2').click(function() {
    $('#container').removeClass();
    $('#container').addClass('templateid2');
});
</script>

I guess 'container' and 'conatiner' is a typo and actually they are the same? Your code seem to be good now. — Nishant
– Nishant, Commented Feb 16, 2011 at 6:55
e.return false; wrong. use e.preventDefault(); return false; — Nishant
– Nishant, Commented Feb 16, 2011 at 7:01
Hmm fixed the spelling error, and was missing });. I actually realized that I don't need the return false call. But, still not working. — Gabriel
– Gabriel, Commented Feb 16, 2011 at 7:16

Ivo Wetzel · Accepted Answer · 2011-02-16 07:22:52Z

3

The problem here is that i inside the anonymous function for the on click handler, is a reference to the loops i and therefore will be 100 for all click handlers after the loop finished.

That a common "mistake" and requires a copy of i on every iteration of the loop in order to work correctly.

function createHandler(i) {
    $('#link'+i).click(function(e) {
         $('#container').removeClass();
         $('#container').addClass('template'+i); // this 'i' won't change anymore
        e.preventDefault();                      // thus the code will add the correct class
        return false;
    });
}

for(var i = 0; i < 100; i++) {
    createHandler(i); // one could also create a closure here
}

See: JavaScript Garden: Closures - Avoiding the Reference Problem.

answered Feb 16, 2011 at 7:22

Ivo Wetzel

46.8k17 gold badges102 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danil · Accepted Answer · 2011-02-16 06:41:47Z

0

Maybe you've forgotten to separate counter from string

$('#link[' + i + ']').click(function() {
    $('#templateid').removeClass();
    $('#templateid').addClass('templateid[' + i + ']');

answered Feb 16, 2011 at 6:41

Danil

1,8931 gold badge21 silver badges23 bronze badges

2 Comments

Danil Over a year ago

OOps, yep, there is no need to use indexer, Nishant's answer is right.

Gabriel Over a year ago

Hi Danil, tried yours and Nishant's options but still no luck.

at0mzk · Accepted Answer · 2011-02-16 06:47:21Z

0

are you using prototype? $('#link') should return the element with id="link" and [i] further narrows it down to the attribute i.

if you want to use the variable i from the loop to find your link2, link3,.. try:

$('#link' + i).click { ...

also, your loop seems to be endless.

answered Feb 16, 2011 at 6:47

at0mzk

1,94215 silver badges18 bronze badges

Collectives™ on Stack Overflow

Help with simple javascript loop

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related