Loops in jquery selectors

Question

So this should be a very simple loop, but it's not working for me.

    for(var j = 1, len = $('#account .person').length; j <= len; j++) {

    $('#a' + j).click( function(){ 
        $('#account' + j).css({left:'0%'});
    });

    };

I was hoping this would spit out....

  $('#a1').click( function(){
      $('#account1').css({left:'0%'});
  });
 $('#a2').click( function(){
      $('#account2').css({left:'0%'});
  });
/* (etc......)  */

If you're making the same change to every element, and each of your #a_ have .person class, you can simply do `$("#account .person").css({left: '0%' } );` — Patrick Moore, Jun 25 '13 at 17:23
@SetSailMedia that should be an answer, not a comment. I'd surely upvote it. — Geeky Guy, Jun 25 '13 at 17:24
your selector isn't going to select anything with '#account' if your ids are in fact '#account1' — Geoff, Jun 25 '13 at 17:26
nothing is happening on click. How would I use each when I only want the individual button clicked to slide it's corresponding element over? Is there a better method than what I'm doing? — jaruesink, Jun 25 '13 at 17:27
`.each()` works to loop through all the .person elements, then sets up the .click() trigger on each element. — Patrick Moore, Jun 25 '13 at 17:34

score 1 · Accepted Answer · answered Jun 25 '13 at 17:24

If you're making the same change to every element, and each of your #a__ elements are in fact the same as .person class elements, you can simply do:

$("#account .person").css({left: '0%' } );

No need to loop through. If they are not related, and you need the loop, use .each() as stated in the comments:

var j =1;
$("#account .person").each( function(){
    j++;
    $('#a' + j).data( 'num', j );
    $('#a' + j).click( function(){ 
        $('#account' + $(this).data('num') ).css({left:'0%'});
    });
});

this one works also, but I had to change the var j = 0 because it was skipping the first element for some reason — jaruesink, Jun 25 '13 at 17:37

score 1 · Answer 2 · edited May 23 '17 at 10:25

The function in

$('#a' + j).click( function(){ 
    $('#account' + j).css({left:'0%'});
});

creates a closure. In short, js interpreter keeps local variables alive even after the block finishes, but it does not copy it. So, by the time click event happends, the for block is already finished, and the value of j left as it was for the final iteration.

In order to avoid that, determine the j in the function from what you have, namely, the element you are attaching the handler, like this (warning: not tested):

 $('#a' + j).click( function(){ 
    var correct_j = $(this).attr('id').replace('a','');
    $('#account' + correct_j ).css({left:'0%'});
 });

@SetSailMedia Typo obviously. Thanks for the catch :) – J0HN Jun 25 '13 at 17:30 — J0HN, Jun 25 '13 at 17:30

score 0 · Answer 3 · answered Jun 25 '13 at 17:35

0

Someone added this as an answer and then deleted it for some reason, but it works for me.

$('[id^="a"]').click( function(){
 $('#account'+this.id.match(/(\d+)$/)[0]).css({left:'0%'});
});

Is there some reason I shouldn't use this method?

answered Jun 25 '13 at 17:35

jaruesink

1,205
2
14
24

Yes, using RegEx like that will make your code very unreadable. RegEx is not appropriate here. It will also perform worse than a `for` loop – Jonathan Jun 25 '13 at 17:42

Loops in jquery selectors

3 Answers3