666

I want to get the class name using jQuery

And if it has an id

<div class="myclass"></div>
2
  • 2
    @Amarghosh: True, true, but you could actually get into this situation, if you use some traversal methods like parents(). Commented Mar 8, 2010 at 9:49
  • 8
    fyi this.className works without jquery (would return "myclass" in above example) Commented Apr 7, 2013 at 6:01

19 Answers 19

1159

After getting the element as jQuery object via other means than its class, then

var className = $('#sidebar div:eq(14)').attr('class');

should do the trick. For the ID use .attr('id').

If you are inside an event handler or other jQuery method, where the element is the pure DOM node without wrapper, you can use:

this.className // for classes, and
this.id // for IDs

Both are standard DOM methods and well supported in all browsers.

Sign up to request clarification or add additional context in comments.

12 Comments

and if its an ID var IDName = $('#id').attr('id');
As sandino points out in his answer, there is always a chance of more than one class name being set. (for instance JQuery-UI adds helper classes all over the place). You could always checked for this using if(className.indexOf(' ') !== -1){throw new Error('Uh-oh! More than one class name!');}
If you leverage .attr('class') and combine it with if(className.indexOf('Class_I_am_Looking_For') > = 0) you can easily check for the existence a specific class and still handle multiple classes.
RonnBlack: if(className.indexOf('Class_I_am_Looking_For') > = 0) will also match "This_Is_Not_the_Class_I_am_Looking_For"
@BenRacicot in that case, simply use standard DOM methods.
|
251

It is better to use .hasClass() when you want to check if an element has a particular class. This is because when an element has multiple class it is not trivial to check.

Example:

<div id='test' class='main divhover'></div>

Where:

$('#test').attr('class');        // returns `main divhover`.

With .hasClass() we can test if the div has the class divhover.

$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main');     // returns true

5 Comments

But what if you don't know the classname? ;-)
that's right...this is only usefull if you know the classname you are checking...but my comment was to alert you not to use .attr('class')=='CLASSNAME_YOU_ARE_SEARCHING' to check if a dom element has some class instead it's better to use .hasClass
Another way is to use .is('.divhover')
Is it possible to loop over classes of an element?
Yes it is just do $(element).attr("class").split(' '); and you get a list then just use a for or foreach loop
49

Be Careful , Perhaps , you have a class and a subclass .

  <div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>

If you use previous solutions , you will have :

myclass mysubclass

So if you want to have the class selector, do the following :

var className = '.'+$('#id').attr('class').split(' ').join('.')

and you will have

.myclass.mysubclass

Now if you want to select all elements that have the same class such as div above :

   var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))

that means

var brothers=$('.myclass.mysubclass')

Update 2018

OR can be implemented with vanilla javascript in 2 lines:

  const { classList } = document.querySelector('#id');
  document.querySelectorAll(`.${Array.from(classList).join('.')}`);

4 Comments

There may be more than one space between classes. More correct variant var className = '.'+$('#id').attr('class').replace(/ +(?= )/g,'').split(' ').join('.')
An even more correct expression is '.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.'), because space, Tab, LF, CR and FF are allowed to separate classes. (.split() also accepts RegExps.)
'.'+$('#id').attr('class').split(/\s+/).join('.') would be more concise, wouldn't it? Or would that match something I'm not thinking about?
To be safe and not get any trailing dot, with any of these solutions, add a trim like this .attr('class').trim().split(...)
31

This is to get the second class into multiple classes using into a element

var class_name = $('#videobuttonChange').attr('class').split(' ')[1];

Comments

17

you can simply use,

var className = $('#id').attr('class');

Comments

12

If your <div> has an id:

​<div id="test" class="my-custom-class"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

...you can try:

var yourClass = $("#test").prop("class");

If your <div> has only a class, you can try:

var yourClass = $(".my-custom-class").prop("class");

Comments

7

If you're going to use the split function to extract the class names, then you're going to have to compensate for potential formatting variations that could produce unexpected results. For example:

" myclass1  myclass2 ".split(' ').join(".")

produces

".myclass1..myclass2."

I think you're better off using a regular expression to match on set of allowable characters for class names. For example:

" myclass1  myclass2  ".match(/[\d\w-_]+/g);

produces

["myclass1", "myclass2"]

The regular expression is probably not complete, but hopefully you understand my point. This approach mitigates the possibility of poor formatting.

Comments

6

To complete Whitestock answer (which is the best I found) I did :

className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');

So for " myclass1 myclass2 " the result will be '.myclass1 .myclass2'

Comments

6
<div id="elem" class="className"></div>

With Javascript

document.getElementById('elem').className;

With jQuery

$('#elem').attr('class');

OR

$('#elem').get(0).className;

Comments

5

You can get class Name by two ways :

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

OR

var className = $('.myclass').prop('class');

Comments

3

If we have a code:

<div id="myDiv" class="myClass myClass2"></div> 

to take class name by using jQuery we could define and use a simple plugin method:

$.fn.class = function(){
  return Array.prototype.slice.call( $(this)[0].classList );
}

or

 $.fn.class = function(){
   return $(this).prop('class');
 } 

The use of the method will be:

$('#myDiv').class();

We have to notice that it will return a list of classes unlike of native method element.className which returns only first class of the attached classes. Because often the element has more than one class attached to it, I recommend you not to use this native method but element.classlist or the method described above.

The first variant of it will return a list of classes as an array, the second as a string - class names separated by spaces:

// [myClass, myClass2]
// "myClass myClass2"

Another important notice is that both methods as well as jQuery method

$('div').prop('class');

return only class list of the first element caught by the jQuery object if we use a more common selector which points many other elements. In such a case we have to mark the element, we want to get his classes, by using some index, e.g.

$('div:eq(2)').prop('class');

It depends also what you need to do with these classes. If you want just to check for a class into the class list of the element with this id you should just use method "hasClass":

if($('#myDiv').hasClass('myClass')){
   // do something
}

as mentioned in the comments above. But if you could need to take all classes as a selector, then use this code:

$.fn.classes = function(){
   var o = $(this);
   return o.prop('class')? [''].concat( o.prop('class').split(' ') ).join('.') : '';
 } 

 var mySelector = $('#myDiv').classes();

The result will be:

// .myClass.myClass2

and you could get it to create dynamically a specific rewriting css rule for example.

Regards

Comments

2

If you do not know the class name BUT you know the ID you can try this:

<div id="currentST" class="myclass"></div>

Then Call it using :

alert($('#currentST').attr('class'));

Comments

2

If you want to get classes of div and then want to check if any class exists then simple use.

if ( $('#div-id' ).hasClass( 'classname' ) ) {
    // do something...
}

e.g;

if ( $('body').hasClass( 'home' ) ) {
    $('#menu-item-4').addClass('active');
}

Comments

2

Try it

HTML

<div class="class_area-1">
    area 1
</div>

<div class="class_area-2">
    area 2
</div>

<div class="class_area-3">
    area 3
</div>

jQuery

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="application/javascript">
    $('div').click(function(){
        alert($(this).attr('class'));
    });
</script>

Comments

1

This works too.

const $el = $(".myclass");
const className = $el[0].className;

Comments

0

if we have single or we want first div element we can use

$('div')[0].className otherwise we need an id of that element

Comments

0

Best way to get class name in javascript or jquery

attr() attribute function is used to get and set attribute.


Get Class

jQuery('your selector').attr('class');  // Return class

Check class exist or not

The hasClass() method checks if any of the selected elements have a specified class name.

 if(jQuery('selector').hasClass('abc-class')){
        // Yes Exist
    }else{
        // NOt exists
    }

Set Class

jQuery('your selector').attr('class','myclass');  // It will add class to your selector

Get Class on Click of button using jQuery

jQuery(document).on('click','button',function(){
     var myclass = jQuery('#selector').attr('class');
});

Add class if selector have no any class using jQuery

if ( $('#div-id' ).hasClass( 'classname' ) ) {
        // Add your code
    }

Get the second class into multiple classes using into a element

Change array position in place of [1] to get particular class.

var mysecondclass = $('#mydiv').attr('class').split(' ')[1];

Comments

0

Direct way

myid.className

console.log( myid.className )
<div id="myid" class="myclass"></div>

Comments

-3

use like this:-

$(".myclass").css("color","red");

if you've used this class more than once then use each operator

$(".myclass").each(function (index, value) {
//do you code
}

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.