Determine If an Element Has a CSS Class With Jquery

Determine if an element has a CSS class with jQuery

Use the hasClass method:

jQueryCollection.hasClass(className);

or

$(selector).hasClass(className);

The argument is (obviously) a string representing the class you are checking, and it returns a boolean (so it doesn't support chaining like most jQuery methods).

Note: If you pass a className argument that contains whitespace, it will be matched literally against the collection's elements' className string. So if, for instance, you have an element,

<span class="foo bar" />

then this will return true:

$('span').hasClass('foo bar')

and these will return false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')

jQuery - If element has class do this

First, you're missing some parentheses in your conditional:

if ($("#about").hasClass("opened")) {
  $("#about").animate({right: "-700px"}, 2000);
}

But you can also simplify this to:

$('#about.opened').animate(...);

If #about doesn't have the opened class, it won't animate.

If the problem is with the animation itself, we'd need to know more about your element positioning (absolute? absolute inside relative parent? does the parent have layout?)

Jquery: How to check if the element has certain css class/style

if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}

Determine if an element has a CSS class with jQuery after load

.hasClass() and .is() work any time you call them as long as your target object exists. But, they don't continue to report to you any time the class might change - they don't monitor for changes.

If you want to check an object every time the page is scrolled to see if its class has changed, then you just need to hook up some code to either the scroll event or to the code that is modifying the page on the scroll event and check the object every time that event fires. It is up to you to write code that determines when you need to check the target object again.

jQuery: Check if div with certain class name exists

You can simplify this by checking the first object that is returned from JQuery like so:

if ($(".mydivclass")[0]){
    // Do something if class exists
} else {
    // Do something if class does not exist
}

In this case if there is a truthy value at the first ([0]) index, then assume class exists.

Edit 04/10/2013: I've created a jsperf test case here.

How to check if the element has multiple css class in jQuery

In your specific case this should be quite enough:

var hasActive = $('.acc_trigger').hasClass("active"); // Bool. TRUE / FALSE

if(hasActive){
    // do something if TRUE
}

Otherwise you can go directly for element existence

$('.acc_trigger.active').css({background: 'red'});

LIVE DEMO

BTW, your HTML formatting is quite unusual, I'd rather say wrong:

DIV (block-level elements) are not supposed to be found inside A (inline) elements

using jQuery to determine if children of a div have a css class

All you need to do is use the selector itself to compare in an if statement

if($('.my-special-class').length > 0){
    //element with this class exists - do something
}

This will search the DOM for any element with the class my-special-class. If it cannot find that element, then the length is returned as 0

Alternatively you can modify your selector if you want to find it within a certain element -

if($('#myDiv .my-special-class').length > 0){
    //element exists in #myDiv - do something
}

This selector works the same way that any CSS selector works, any children of myDiv with the class my-special-class will be selected

How to check if element has a class

Where this not refers to the element which may refer to window object or any other context. To make it work, cache the element reference(jQuery object) and do the rest on the cached object.

var $ele = $(".filter");
if($ele.hasClass("active")) {
    var activeFilter = $ele.attr("data-filter");
    alert(activeFilter);
}

var $ele = $(".filter");if ($ele.hasClass("active")) {  var activeFilter = $ele.attr("data-filter");  alert(activeFilter);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>  <li class="col-xs-6 col-sm-6 col-md-2 filter active" data-filter=".office"></li></ul>

<script>  
$(document).ready(function() {  
    if($('#first').attr("style").indexOf("height") != -1) {
        alert("height is hardcoded");
     }
    else {
        alert("height is not hardcoded");  
     }

  });
</script>