Get class list for element with jQuery

Question

Is there a way in jQuery to loop through or assign to an array all of the classes that are assigned to an element?

ex.

<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

I will be looking for a "special" class as in "dolor_spec" above. I know that I could use hasClass() but the actual class name may not necessarily be known at the time.

i have no idea about actually looping trough an existing collection, but i would getting the class attribute and use javascript, split it on the space... then you can loop over your array. — Sander, Aug 4 '09 at 12:43
If you don't know the class name at the time, preventing you from using hasClass(), how do you intend to know which one in the array it is? — doomspork, Aug 4 '09 at 13:05
I am designing a form where I am doing some preliminary validation with jQuery. I am appending the id of the input element to the class list of the error div if one is generated. I am then making it possible to click on the error div to focus the errant input element. This script is going to be used for more than one form. I therefore do not want to hard-code the ids in the script. — Buggabill, Aug 4 '09 at 13:10
Right, I understand why you wouldn't want to hardcode. But if you take a moment to look over redsquare's example you'll see you've got to hardcode 'someClass' into the if block. Either way you could achieve this with a variable. — doomspork, Aug 4 '09 at 13:31

Paul Alexander · Accepted Answer · 2011-12-28 08:15:23Z

You can use document.getElementById('divId').className.split(/\s+/); to get you an array of class names.

Then you can iterate and find the one you want.
正确答案

var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
   if (classList[i] === 'someClass') {
     //do something
   }
}

jQuery does not really help you here.....

var classList =$('#divId').attr('class').split(/\s+/);
$.each( classList, function(index, item){
    if (item === 'someClass') {
       //do something
    }
});

that is exactly what i woud have done, but i was not sure if there was a build in jQuery function that gave you a collection of the classes. — Sander, Aug 4 '09 at 12:51
@WmasterJ The OP asked how to get all the classes defined on an element. How does hasClass help here! — redsquare, Jan 31 '11 at 9:19
Add a jQuery plugin yourself: $.fn.classList = function() {return this.className.split(/\s+/);}; — ripper234, Mar 9 '12 at 17:45
@ripper234 You mean $.fn.classList = function() {return this[0].className.split(/\s+/);};, since className is not a property of the jQuery-wrapped DOM element. Your way results in TypeError: Cannot read property 'split' of undefined. Perhaps flag and ask a mod to edit your (popular but wrong) comment? — Mark Amery, Sep 3 '14 at 11:39

Will · Answer 2 · 2013-10-04 16:44:27Z

Here is a jQuery plugin which will return an array of all the classes the matched element(s) have

;!(function ($) {
    $.fn.classes = function (callback) {
        var classes = [];
        $.each(this, function (i, v) {
            var splitClassName = v.className.split(/\s+/);
            for (var j in splitClassName) {
                var className = splitClassName[j];
                if (-1 === classes.indexOf(className)) {
                    classes.push(className);
                }
            }
        });
        if ('function' === typeof callback) {
            for (var i in classes) {
                callback(classes[i]);
            }
        }
        return classes;
    };
})(jQuery);

Use it like

$('div').classes();

In your case returns

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

You can also pass a function to the method to be called on each class

$('div').classes(
    function(c) {
        // do something with each class
    }
);

Here is a jsFiddle I set up to demonstrate and test http://jsfiddle.net/GD8Qn/8/

Minified Javascript

;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);

Thanks, maybe in 3 years this answer will surpass the current one haha. I went back and renamed my variables so they are readable and added a minified version. — Will, Apr 29 '13 at 19:15
Perfect fit for FullCalendar when copying classes into the className attribute of an Event. — Dan Power, Aug 27 '13 at 15:46

mikemaccana · Answer 3 · 2014-12-15 11:01:30Z

up vote78down vote

Why has no one simply listed.

  $(element).attr("class").split(' ');

edited Dec 15 '14 at 11:01

mikemaccana
10.5k977128

answered Apr 15 '12 at 2:28

Dreamr OKelly
85053

4

That is part of the accepted answer... I needed all the classes that were applied to an element. – BuggabillApr 17 '12 at 12:26

Haha, true! I wanted just this. It returns a string of classes separated by spaces, so maybe if you want to pick up one of them you can split the string by space and get an array to pick up a class from – Rahul DoleAug 6 '13 at 13:18

Perfect quick answer to the question without details. Perfect for others looking for the general answer to the general question. +1 – Mike_K Jan 11 '14 at 19:19

nice answer +1. – Adnan Ahmed Jun 16 '14 at 14:09

1

Because it's wrong! Classes can be separated by any kind of whitespace (e.g. you can wrap a long class attribute in your HTML onto multiple lines), but this answer fails to account for that. Try pasting $('<div class="foo bar baz">').attr("class").split(' ') into your browser console (there's a tab character in there); you'll get ["foo", "bar baz"] instead of the correct class list of ["foo", "bar", "baz"]. – Mark Amery Dec 17 '14 at 23:27

add a comment

Mark Amery · Answer 4 · 2014-12-17 23:36:02Z

On supporting browsers, you can use DOM elements' classList property.

$(element)[0].classList

It is an array-like object listing all of the classes the element has.

If you need to support old browser versions that don't support the classList property, the linked MDN page also includes a shim for it - although even the shim won't work on Internet Explorer versions below IE 8.

Fiona Taylor Gorringe · Answer 5 · 2012-05-09 12:52:04Z

var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){

     //do something

});

alexche8 · Answer 6 · 2013-11-25 13:41:38Z

up vote5down vote

$('div').attr('class').split(' ').map(function(cls){ console.log(cls);})

edited Nov 25 '13 at 13:41

answered Sep 16 '13 at 14:49

alexche8
3721611

This is a horrible abuse of .map; use .each if you don't need .map's return value. Splitting on spaces rather than any whitespace is also broken - see my comment on stackoverflow.com/a/10159062/1709587. Even if none of these points were true, this adds nothing new to the page. -1! – Mark Amery Dec 17 '14 at 23:54

add a comment

Anuj J · Answer 7 · 2014-02-25 12:09:52Z

javascript provides a classList attribute for a node element in dom. Simply using

  element.classList

will return a object of form

  DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}

The object has functions like contains, add, remove which you can use

Inferior duplicate of stackoverflow.com/a/5457148/1709587 which was posted 3 years before you; -1. — Mark Amery, Dec 17 '14 at 23:52

gesellix · Answer 8 · 2010-06-21 09:35:04Z

A bit late, but using the extend() function lets you call "hasClass()" on any element, e.g.:
var hasClass = $('#divId').hasClass('someClass');

(function($) {
$.extend({
    hasClass: new function(className) {
        var classAttr = $J(this).attr('class');
        if (classAttr != null && classAttr != undefined) {
            var classList = classAttr.split(/\s+/);
            for(var ix = 0, len = classList.length;ix < len;ix++) {
                if (className === classList[ix]) {
                    return true;
                }
            }
        }
        return false;
    }
}); })(jQuery);

Also, jQuery has had this function built-in since version 1.2. — Andrew, Sep 15 '11 at 17:55

Alan L. · Answer 9 · 2011-10-20 18:02:14Z

Thanks for this - I was having a similar issue, as I'm trying to programatically relate objects will hierarchical class names, even though those names might not necessarily be known to my script.

In my script, I want an <a> tag to turn help text on/off by giving the <a> tag [some_class] plus the class of toggle, and then giving it's help text the class of [some_class]_toggle. This code is successfully finding the related elements using jQuery:

$("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);});

function toggleHelp(obj, mode){
    var classList = obj.attr('class').split(/\s+/);
    $.each( classList, function(index, item){
    if (item.indexOf("_toggle") > 0) {
       var targetClass = "." + item.replace("_toggle", "");
       if(mode===false){$(targetClass).removeClass("off");}
       else{$(targetClass).addClass("off");}
    }
    });
}

Thanks Alan, I'm doing something similar, I'm surprised that there isn't a simpler way to do this. — Eric Kigathi, Jan 31 '12 at 1:33
-1 - tl;dr, goes off on a tangent not directly relevant to the question. — Mark Amery, Dec 17 '14 at 23:57

john ktejik · Answer 10 · 2014-11-14 00:15:08Z

The question is what Jquery is designed to do.

$('.dolor_spec').each(function(){ //do stuff

And why has no one given .find() as an answer?

$('div').find('.dolor_spec').each(function(){
  ..
});

There is also classList for non-IE browsers:

if element.classList.contains("dolor_spec") {  //do stuff

-1; among other problems, your first two code snippets are unrelated to the question asked and your final snippet is a syntax error. — Mark Amery, Dec 17 '14 at 23:58

Gregra · Accepted Answer · 2012-02-22 10:14:08Z

up vote-4down vote

Here you go, just tweaked readsquare's answer to return an array of all classes:

function classList(elem){
   var classList = elem.attr('class').split(/\s+/);
    var classes = new Array(classList.length);
    $.each( classList, function(index, item){
        classes[index] = item;
    });

    return classes;
}

Pass a jQuery element to the function, so that a sample call will be:

var myClasses = classList($('#myElement'));

answered Feb 22 '12 at 10:14

Gregra
9214

3

Why iterate through the classList array, add all elements to the classes array and return the classes array? Just returning the classList should do the same trick, right? – Martijn Jul 28 '12 at 11:00

Nope. Since we are referring to a situation where there are many classes for the same element. If it was so easy, we weren't here on this thread :) – Gregra Jul 29 '12 at 12:08

8

This thread is about returning a list of classes, and simply returning$(elem).attr('class').split(/\s+/) does that. Maybe I'm mistaking, but I don't see any reason to iterate through a collection, copy the contents to a new collection and return that new collection. – MartijnJul 30 '12 at 9:26

add a comment

来自 http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery

I want to get the class name using jQuery

And if it has an id

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

edited Apr 25 '14 at 21:42

Mark Amery
8,69555085

asked Mar 8 '10 at 9:43

X10nD
4,5212866112

2

@Amarghosh: True, true, but you could actually get into this situation, if you use some traversal methods like parents(). – Boldewyn Mar 8 '10 at 9:49

4

fyi this.className works without jquery (would return "myclass" in above example) – Accipheran Apr 7 '13 at 6:01

add a comment

9 Answers

active oldest votes

up vote568down voteaccepted

正确答案
var className = $('.myclass').attr('class');

should do the trick.

来自 http://stackoverflow.com/questions/2400386/get-class-name-using-jquery

score 568 · Accepted Answer

正确答案
var className = $('.myclass').attr('class');

should do the trick.

You are here

jquery 得到 class name 得到类名

如何用Jquery获取某一个Div的Class或者ID

Get class list for element with jQuery

11 Answers

Minified Javascript

9 Answers

友情链接

搜索表单

用户登录

You are here

jquery 得到 class name 得到 类名

如何用Jquery获取某一个Div的Class或者ID

Get class list for element with jQuery

11 Answers

Minified Javascript

9 Answers

友情链接

jquery 得到 class name 得到类名