How can I get the current class of a div with jQuery?
JqueryJquery Problem Overview
Using jQuery, how can I get the current class of a div called div1
?
Jquery Solutions
Solution 1 - Jquery
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
Solution 2 - Jquery
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'
Solution 3 - Jquery
$('#div1').attr('class')
will return a string of the classes. Turn it into an array of class names
var classNames = $('#div1').attr('class').split(' ');
Solution 4 - Jquery
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');
Solution 5 - Jquery
$("#div1").attr("class")
Solution 6 - Jquery
var classname=$('#div1').attr('class')
Solution 7 - Jquery
var className=$('selector').attr('class');
or
var className=$(this).attr('class');
the classname of the current element
Solution 8 - Jquery
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>
Solution 9 - Jquery
try this
$("#div1").attr("class")
Solution 10 - Jquery
<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
Solution 11 - Jquery
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