Question

This is more a question of how would you go about doing this than a specific problem.

Say i have 5 divs called div1, div2, div3, div4, div5. Whats the quickest/best way to make a looping function such as the one below that will loop a certain div (not all the divs on the page) if it is clicked.

Heres the best way i can think of explaining it.

Div1 is clicked. A function is called that checks div1 is listed as a div that should loop. Then starts the looping function. Div6 is clicked, but is not listed as a div that can loop and the function is not run.

function div1loop() {
        $("#div1").fadeTo("slow", 0.5, function ()    {
            $("#div1").fadeTo("slow", 0.1, div1loop);  
        });
}

Is there any way you could suggest that could the “#div1” part a variable so that i would not have to write 5 different functions for the 5 separate divs?

For a bit of background info –
Im going to end up having 50+ divs to do this for, and as you can imagine, it would save me a lot of time if i could make a function that could do this instead of 50.

Thanks!

Answer 1

You can do it this way :

function divloop(selector) {
   $(selector).fadeTo("slow", 0.5, function ()    {
       $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
   });
}

Then :

divloop("#div1");

Edit :
You’ve 2 options:

1. Store selectors allowed in an array :

   var allowedDivs = ["#div1", "#div2", "#div3" ];
   

   and in divloop :

   function divloop(selector) {
       if(!$.inArray(selector, allowedDivs ) {
           return false;
       }
       $(selector).fadeTo("slow", 0.5, function ()    {
          $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
       });
   }
   

2. Or add a class to your div that you can check in your function

   <div id="div1" class="canLoop"></div>
   

   Then in your function :

   function divloop(selector) {
       if(!$(selector).hasClass("canLoop")) {
           return false;
       }
       $(selector).fadeTo("slow", 0.5, function ()    {
          $(selector).fadeTo("slow", 0.1, function() { divloop(selector); });  
       });
   }