JQuery for loop - function with variables

Question

Is there a way to turn this into a for loop? I have to run this code 114 time and am looking for a way to simplify this. The numbers on the class name would be the variable. The next one would be .select3 etc...

$('.select2').click(function () {
        if ($('.saved_list .thumb2').length == 0 && $('.saved > li').length < totalPic)
            {
                $(this).parent().clone().appendTo('.saved_list ul');
                $('.saved .select2').replaceWith('<div class="remove2">Remove</div>');
                $('.saved a').contents().unwrap(); 
            } else {
                alert ('You can only choose 3 paintings');  
            }
            if ($('.saved_list li').has('.thumb2')) {
                $(".select2 .img-swap").attr("src", "images/check_on.gif");
            } else {
                $(".select2 .img-swap").attr("src", "images/check_off.gif");
        };
    });

no need for a loop.. just make it more flexible.. show your html — wirey00
– wirey00, Commented Sep 18, 2012 at 1:53
Wouldn't it be easier to give them all a common class name, then you could just use a single selector for all of them? — Barmar
– Barmar, Commented Sep 18, 2012 at 1:54

Femi · Accepted Answer · 2012-09-18 01:50:49Z

2

Try this:

var run_select = function(index){
    var selector = '.select'+index;
    $(selector).click(function () {
        if ($('.saved_list .thumb2').length == 0 && $('.saved > li').length < totalPic)
        {
            $(this).parent().clone().appendTo('.saved_list ul');
            $('.saved '+selector).replaceWith('<div class="remove2">Remove</div>');
            $('.saved a').contents().unwrap(); 
        } else {
            alert ('You can only choose 3 paintings');  
        }
        if ($('.saved_list li').has('.thumb2')) {
            $(selector+" .img-swap").attr("src", "images/check_on.gif");
        } else {
            $(selector+" .img-swap").attr("src", "images/check_off.gif");
        };
    });
};
var i, l = 114;
for(i=1;i<=114;i++){
    run_select(i);
}

answered Sep 18, 2012 at 1:50

Femi

64.8k8 gold badges120 silver badges150 bronze badges

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

Comments

taseenb · Accepted Answer · 2012-09-18 02:17:14Z

-1

First, simplify html if you can. Use id for unique identifiers and the same name for css classes. Like this:

<div id='select2' class='select'></div>

Then use .each() if you want to get all your items:

$('.select').each(function() {
    // use $(this) here to refer to the current item
});

But in your case, you can simply apply the 'click' event like this:

$('.select').click(function(e) {
       // use $(this) or $(e.target) here to refer to the current item
       // if you need to get the id number you could get it from the id
       // (supposing has id='select2')

       var id = $(this).attr('id').substring(6); // it returns 2
});

answered Sep 18, 2012 at 2:17

taseenb

1,4331 gold badge17 silver badges31 bronze badges

Collectives™ on Stack Overflow

JQuery for loop - function with variables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related