Check if all items have the same class

I built a FAQ page with the option to hide and show the content underneath each questi开发者_StackOverflow社区on. I have a "Expand all" functionality that let the user display all the questions onclick. When a question is expanded it gets a class of "selected".

I am trying to change the "Expand All" status when all questions (LIs) are expanded.

How can I check that all the LI have the CLASS "selected" at the same time?

I use the EACH method to get the LIs and their CLASS.

Thanks in advance

You can probably count the list items with selected class against all list items:

if ($("#questions li.selected").length == $("#questions li").length) {
    // all list items are selected
}

#questions is the element that contains your list and of course it might be different in your code, but you should get the idea.

$("li:not(.selected)").length

Would give you the number of <li>s that do not have the 'selected' class. If this figure was zero you could run your logic.

Select all list items, filter out the items belonging to a certain class and then determine whether or not there are any left over:

if($("li").not(".className").length > 0 ) {
    //code
}

You could compare the number of li elements to the number of li elements with the class "selected". If those numbers are the same, then all the li elements have that class:

if($("li").length == $("li.selected").length) {
   //All li elements have class selected
}

You can do this at any point, it does not have to go inside an each loop.

Or you could try this with size()

if( $("li.success").size() == $("li").size() ){
    //return true
}

I am not sure to understand the problem but the check if a jQuery object has a class, you use .hasClass().

When i understnad you right, you want to set the class selected to all of your li elements when clicking on a ShowAll button?

You don't need to iterate yourself over all lielements.

Just select them and call addClass on them:

$('li').addClass('selected');