Add a click function dynamically within a for loop using closure

Question

I am trying to create a dynamic accordion. My problem is that I can not seem to get a reference to the i variable inside the for loop. I know it is a scope problem but I thought this closure would do the trick.... Please someone help me out as this is driving me completely insane.

jQuery(function(){

  var tables = jQuery('table');
  var tableHeadings = jQuery('h3');

  for(i =0 , ii = tableHeadings.length; i < ii; i++){
     (function(){ 

        var index = i;
        tables.eq(index).addClass('table-' + index);

        tableHeadings.eq(index).click(function(){   
            tables.eq(index).slideToggle(); 
        });

      })();
    }  
});

Have you got a live example of where this fails? This should work AFAIK. — Matt
– Matt, Commented Dec 19, 2011 at 15:49
Why would you need a closure here? Just execute the code in the for loop directly. — asawyer
– asawyer, Commented Dec 19, 2011 at 15:50
@asawyer: Because otherwise in the click handler, i (or index) would always be the last value. — Matt
– Matt, Commented Dec 19, 2011 at 15:50
@Matt Ah I see. Why not $("h3").each(function(i,e){ ... }); then, instead of the awkward for loop? — asawyer
– asawyer, Commented Dec 19, 2011 at 15:52
@asawyer: That'd work as well, have to ask `@RobertRubyII why he elected not to use it :). — Matt
– Matt, Commented Dec 19, 2011 at 15:56

wrschneider · Accepted Answer · 2011-12-19 15:55:40Z

4

Better yet:

tableHeadings.each(function(index, element) {
  tables.eq(index).addClass('table-' + index);

  tableHeadings.eq(index).click(function() {   
    tables.eq(index).slideToggle(); 
  });
});

answered Dec 19, 2011 at 15:55

wrschneider

19k17 gold badges109 silver badges192 bronze badges

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

2 Comments

Richard Dalton Over a year ago

Dunno if it is better to use tableHeadings.eq(index) or $(this)

wrschneider Over a year ago

good point. I just copy-pasted the body, but you're right. This is a less straightforward case because of the need to correlate tables and tableHeadings - I would probably refactor the DOM to keep those together, perhaps wrap in a DIV and then use the wrapper as the selector and loop var instead.

Collectives™ on Stack Overflow

Add a click function dynamically within a for loop using closure

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related