I am trying to simplify a list of functions down to a single function. Basically I have 6 divs, each with the id #slide_ where the underscore is a number from 1-6 (#slide1, #slide2, etc).
My functions are something like this:
if ($("#slide1").hasClass('active')) {});
There is one of these if statements for each of the #slide_ ids. What is the best way to simplify this so I have have a single function instead of 6 different if statements?
Loop that sucker up! First, apply a class (I use .slide for example purposes):
var $slides = $('.slide');
Or (if you can't mod the HTML) you can use the "starts with" selector that @j08691 references:
var $slides = $('[id^="slide"]');
Then apply a for loop on that collection:
for(var i = $slides.length; i--;){
if($slides.eq(i).hasClass('active')){
// do your magic
}
}
Or you can take it even farther and if you are doing something to the same object, just filter the record set:
$slides.filter(function(){
return $(this).hasClass('active');
}).applyMethod();
If you are modifying objects other than the slides then use the loop, else if you are modifying the slides themselves use the filter. Either way, it should work.
Use the starts with selector:
$("[id^='slide']").each(...)
Note though that this will match all elements with an ID that begins with "slide". The better solution is to assign a class to the elements you want to target, and select the class instead.
$("#slide1").hasClass("active");.
$("#slide2"), $("#slide3"), etc as well. Yours wouldn't.
$("[id^='slide'].active").each(function() {});