Check if all items have the same class

Question

I built a FAQ page with the option to hide and show the content underneath each question. 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

I'm not sure I get what you're asking; couldn't you just select the list items that have class `selected`? Although I'm not sure you'd want to do that--seems like it'd be better to handle only the single list element that's been expanded. — Dave Newton, Sep 20 '11 at 12:25

score 38 · Answer 1 · answered Sep 20 '11 at 12:26

38

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.

answered Sep 20 '11 at 12:26

Xion

22,400
10
55
79

1

11 Years later, this helped someone else. Thankyou! – Vivek K. Sep 13 '22 at 03:21

score 11 · Answer 2 · answered Sep 20 '11 at 12:29

11

$("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.

answered Sep 20 '11 at 12:29

ipr101

24,096
8
59
61

score 10 · Answer 3 · answered Sep 20 '11 at 12:26

10

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
}

answered Sep 20 '11 at 12:26

Dennis

32,200
11
64
79

score 4 · Answer 4 · answered Sep 20 '11 at 12:27

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.

score 2 · Answer 5 · edited Mar 03 '16 at 11:29

2

Or you could try this with size()

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

edited Mar 03 '16 at 11:29

Phiter

14,570
14
50
84

answered Mar 03 '16 at 10:53

Steve Mather

71
6

score 0 · Answer 6 · answered Sep 20 '11 at 12:27

0

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

answered Sep 20 '11 at 12:27

Mika Andrianarijaona

1,619
17
29

This does not determine if every element in the list has the specified class, but only whether any of the elements do. If only one element does, or if all elements do, it will return true either way. – Boric Jul 03 '19 at 14:57

score 0 · Answer 7 · answered Sep 20 '11 at 12:27

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');

Check if all items have the same class

7 Answers7