81

Using jQuery, how can I get the current class of a div called div1?

11 Answers 11

124

Just get the class attribute:

var div1Class = $('#div1').attr('class');

Example

<div id="div1" class="accordion accordion_active">

To check the above div for classes contained in it

var a = ("#div1").attr('class'); 
console.log(a);

console output

accordion accordion_active
3
  • is that really an attribute? className..? Isn't className only used for javascript? document.getElementById("div1").className
    – peirix
    Commented Oct 8, 2009 at 10:15
  • 2
    Saw now that according to the jQuery doc it's suggested to use className so it won't interfere with the reserved word class in javascript...
    – peirix
    Commented Oct 8, 2009 at 10:29
  • 2
    NOTE: In jQuery 1.6, they finally fixed the attr method, and you should now use $(...).attr('class');, className is just an accessor property that maps to the class attribute on the DOM element -there is no className attribute, it's just a property-. Commented Jul 13, 2011 at 21:42
19

Simply by

var divClass = $("#div1").attr("class")

You can do some other stuff to manipulate element's class

$("#div1").addClass("foo"); // add class 'foo' to div1
$("#div1").removeClass("foo"); // remove class 'foo' from div1
$("#div1").toggleClass("foo"); // toggle class 'foo'
13
$('#div1').attr('class')

will return a string of the classes. Turn it into an array of class names

var classNames = $('#div1').attr('class').split(' ');
1
  • 3
    +1'd. ($('#div1').attr('class') || '').split(' ') is safer imo.
    – user420667
    Commented Sep 17, 2014 at 17:25
10

From now on is better to use the .prop() function instead of the .attr() one.

Here the jQuery documentation:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

var div1Class = $('#div1').prop('class');
1
  • it's changed again since 2.2: As of jQuery 1.12/2.2, [...] the class attribute is used instead. So, .removeClass() can be used on XML or SVG documents. (source: api.jquery.com/removeClass)
    – Sandra
    Commented Jan 29, 2019 at 15:41
2
$("#div1").attr("class")
1
var classname=$('#div1').attr('class')
1
var className=$('selector').attr('class');

or

var className=$(this).attr('class');

the classname of the current element

1

The addClass method in jQuery has a currentClass built in property. You can use it inside a function call. Like so:

<div>First div</div>
<div class="red">Second div</div>
<div>Third div</div>
<div>Fourth div</div>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;
    if ( currentClass === "red" ) {
      addedClass = "green"; }
    return addedClass;
  });
</script>
0

try this

$("#div1").attr("class")

0
<div  id="my_id" class="my_class"></div>

if that is the first div then address it like so:

document.write("div CSS class: " + document.getElementsByTagName('div')[0].className);

alternatively do this:

document.write("alternative way: " + document.getElementById('my_id').className);

It yields the following results:

div CSS class: my_class
alternative way: my_class
0

if you want to look for a div that has more than 1 class try this:

Html:

<div class="class1 class2 class3" id="myDiv">

Jquery:

var check = $( "#myDiv" ).hasClass( "class2" ).toString();

ouput:

true

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.