a for loop to concatenate selector jquery

Question

I'm having a strange issue with a small piece of jquery code when using a for loop to concatenate jquery selector:

NOT working:

for(j = 1; j <= myHypervisors.length; j++)
{
    $("#status_vm" + j + "_dev").hide();
        $("#title_hypervisor_" + j).toggle(function(){
        $("#status_vm" + j + "_dev").show();
        $("#show_hypervisor_" + j).toggleClass('icon-plus icon-minus');
    },function(){
        $("#status_vm" + j + "_dev").hide();
        $("#show_hypervisor_" + j).toggleClass('icon-minus icon-plus'); 
    });
}//for

myHypervisors.length == 2

WORKING:

$("#status_vm1_dev").hide();
    $("#title_hypervisor_1").toggle(function(){
    $("#status_vm1_dev").show();
    $("#show_hypervisor_1").toggleClass('icon-plus icon-minus');
 },function(){
    $("#status_vm1_dev").hide();
    $("#show_hypervisor_1").toggleClass('icon-minus icon-plus');    
 });

$("#status_vm2_dev").hide();
    $("#title_hypervisor_2").toggle(function(){
    $("#status_vm2_dev").show();
    $("#show_hypervisor_2").toggleClass('icon-plus icon-minus');
 },function(){
    $("#status_vm2_dev").hide();
    $("#show_hypervisor_2").toggleClass('icon-minus icon-plus');    
 });

Regarding the DOM:

<h3 id="title_hypervisor_1"><i class="icon-plus" id="show_hypervisor_1"></i> Hypervisor : vm1-dev </h3>

<table class="table table-bordered" id="status_vm1_dev"></table>
...

Thank you in advance for your help

Denys Séguret · Accepted Answer · 2013-04-09T17:36:57.263

4

That's because j changes : when the callbacks are executed, its value is the one of end of loop. You may protect it with an immediately called function :

for(j = 1; j <= myHypervisors.length; j++){
   (function(j){
    $("#status_vm" + j + "_dev").hide();
    $("#title_hypervisor_" + j).toggle(function(){
        $("#status_vm" + j + "_dev").show();
        $("#show_hypervisor_" + j).toggleClass('icon-plus icon-minus');
    },function(){
        $("#status_vm" + j + "_dev").hide();
        $("#show_hypervisor_" + j).toggleClass('icon-minus icon-plus'); 
    });
   })(j);
}

And for people not liking functions created in a loop, here's another solution (as a bonus it's compatible with recent versions of jQuery) :

for(j = 1; j <= myHypervisors.length; j++) $("#status_vm" + j + "_dev").hide();
$('[id^="title_hypervisor_"]').click(function(){
   var j = this.id.slice('title_hypervisor_'.length);
   $("#status_vm" + j + "_dev").toggle();
   $("#show_hypervisor_" + j).toggleClass('icon-plus icon-minus');
});

edited Apr 09 '13 at 17:36

answered Apr 09 '13 at 16:37

Denys Séguret

372,613
87
782
758

I still don't like to see functions created in a loop, but that is not your fault :) – Mark Schultheiss Apr 09 '13 at 17:20
@MarkSchultheiss I made a second solution for you. – Denys Séguret Apr 09 '13 at 17:28
1

BTW I think the toggle function taking functions as parameters did disappear, didn't it ? edit : http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone – Denys Séguret Apr 09 '13 at 17:30
The "pseudo" functions like the .hover for mousein/out and toggle in this form were deprecated previously, then removed in the 1.9+ as a general "cleanup for a better way" strategy. The release notes make that pretty clear. – Mark Schultheiss Apr 09 '13 at 20:07
Thank you for your fast and precious help! – Virtuose Apr 10 '13 at 07:55

a for loop to concatenate selector jquery

1 Answers1