JQuery iterating through a loop on click

Question

I have tried several ways to loop through a set of 4 li elements, each with a class of "item_n" where in is an integer 1-4. I need to increment by 1 with each click. I have come close, but it ended up getting worse. Here is my semi-working code:

$('input.compare').change(function(){
    var me = $(this).attr("refid");
    $('li.item_1').append('<img src="images/submenu/' + me + '.png" alt="compare1" height="28" width="28" />');
});

I need to loop through the li.item_1 selector like $('li.item_"+i"') with each click until four is reached.

Thanks in advance.

Wilfredo P · Accepted Answer · 2014-05-07 02:10:12Z

1

I think you could try:

$('input.compare').change(function(){
    var me = $(this).attr("refid");
    $('li [class^=item_]').each(function(){
         var me = $(this).name();
         $(this).append('<img src="images/submenu/' + me + '.png" alt="compare1" height="28" width="28" />');
        });
});

where [class^=item_] will get any class that li has and start with item_

edited May 7, 2014 at 2:10

answered May 7, 2014 at 1:55

Wilfredo P

4,07430 silver badges46 bronze badges

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

1 Comment

zedkineece Over a year ago

I'm sorry, I guess I didn't explain well enough. I have 4 li elements, like the following: <ul> <li class="item_1"></li> <li class="item_2"></li> <li class="item_3"></li> <li class="item_4"></li> </ul> When the user clicks any one of the input.compare elements, I need to append the first li[class='item_1'] with an image. When the user clicks any one of the remaining input.compare elements, it appends li[class='item_2'], and so on until the final li[class='item_4'] is appended. After the last one is appended I need to display an alert.

Jane S · Accepted Answer · 2014-05-07 01:48:48Z

0

Something like this will allow you to enumerate if you give them all the same class.

$('input.compare').change(function(){
   $(".itemclass").each(function(){
     // do what you need
     alert($(this).name())
   });
 });

answered May 7, 2014 at 1:48

Jane S

1,48716 silver badges22 bronze badges

Collectives™ on Stack Overflow

JQuery iterating through a loop on click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related