从元素数组中查找哪个元素具有特定类的更好方法

Question

Suppose I have a List like the following

  <ul>
     <li id="slide-a" class="slide-li active-slide"><a href="#" >A</a></li>
     <li id="slide-b" class="slide-li"><a href="#" >B</a></li>
     <li id="slide-c" class="slide-li"><a href="#" >C</a></li                        
  </ul>

Now , using Jquery I wanna Find out which Element has the class 'active-class' . One way would to have a nested if statement something like this:

if($("#slide-a").hasClass('active-slide'))
{
  active = 'slide-a';
}
else
{
  if($("#slide-b").hasClass('active-slide'))
  {
    active = 'slide-b';
  }
  else
  {
    if($("#slide-c").hasClass('active-slide'))
    {
      active = 'slide-c';
    }
  }
}

My question is if there exists any way to optimize the code above. Is there a generic way to achieve this such that even if I add 10 more li's in the ul the code just works fine without any modification.

Answer 1

Maybe just

var active = $(".active-slide").attr("id");

Demo

Answer 2

Use Attribute starts with selector and .each() . Try this:

$(document).ready(function(){
    $('li[id^=slide]').each(function(){
        if($(this).hasClass('active-slide'))
            alert($(this).attr('id'));
    });
});

DEMO

If you have more than one li with class active-slide use this:

$(document).ready(function(){
    var idVal = [];
    $('li[id^=slide]').each(function(){
        if($(this).hasClass('active-slide'))
            idVal.push($(this).attr('id'));
    });
    console.log(idVal);
});

DEMO

Answer 3

You could a use jQuery $.each() on the ul to iterate through.

fiddle coming in a second.