I'd like to know if a style class exists and if yes, how many elements have it.

To know if a style class exists, I use:

if ($("*").hasClass('ui-state-active')) {
    alert("class exist : "+nb_checked);
}

But to know how many elements have the class, I can't figure out.

I'd like to know if a style class exists and if yes, how many elements have it.

To know if a style class exists, I use:

if ($("*").hasClass('ui-state-active')) {
    alert("class exist : "+nb_checked);
}

But to know how many elements have the class, I can't figure out.

• javascript
• jquery
• html
• css
• dom

Share Improve this question Follow edited Mar 25, 2013 at 18:23 Ian 50.9k1313 gold badges103103 silver badges111111 bronze badges asked Mar 25, 2013 at 18:16 atbegin-butatbegin-but 27311 gold badge88 silver badges1919 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 9

This is a simpler approach:

$('.ui-state-active').length

Just do:

$('.ui-state-active').length

if($('.ui-state-active').length){
     alert("class exist : "+$('.ui-state-active').length);
}

Doc here :

http://api.jquery./length/

You can use this for both

c = $('.ui-state-active').length;
if (c>0) {
    console.log('There is '+c+' elements having required class');
}

Using jQuery, you can directly select all elements which have a certain class. The syntax for this is the same as that for CSS selectors:

$(".className")

This creates a jQuery object, which is a collection of the matched elements. There are many useful properties of this object, one of which is length, the number of elements in the collection.

In your case, finding the number of required elements is as trivial as

$(".ui-state-active").length

You could do both in one go:

var elements = $('.ui-state-active');
if(elements.length === 0) {
    alert('No elements with class ui-state-active!')
} else {
    alert(elements.length +  ' elements with class ui-state-active');
}

How about:

$(".ui-state-active").length;