Question

So I have this nice slider script that I want to use on this page: http://tuscaroratackle.com/rods for several instances on the page. (In other words each rod posting will have it’s own slider, a total of about 11 sliders on the page)

In order to run the script I have to include this function declaration:

$(document).ready(function(){   
    $("#rod-slider1").easySlider();
     $("#rod-slider2").easySlider();
     $("#rod-slider3").easySlider();
     $("#rod-slider4").easySlider();
     $("#rod-slider5").easySlider();
     $("#rod-slider6").easySlider();
     $("#rod-slider7").easySlider();
     $("#rod-slider8").easySlider();
     ...etc...
  });

So the question here (is a jQ noob question I know) is can I combine those lines into one by adding all the ID selectors into the first function? And if so, what would be the proper format for writing it that way?

Answer 1

You can also use a class:

$(document).ready(function(){   
    $(".rod-slider").easySlider();
});

The slider will now be applied to all/any elements having the class rod-slider.

If you want/need to use ids, you can do so by separating them with a comma:

$(document).ready(function(){   
    $("#rod-slider1, #rod-slider2, #rod-slider3, #etc").easySlider();
});

Or you can use the add method.

If you don’t want to modify you current html, you can use the starts with selector:

$(document).ready(function(){   
    $("[id^='rod-slider']").easySlider();
});