Get the "class" attribute of an object split into an array of strings

Question

Preamble: I'm Italian, sorry for my bad English.

So this is the question:

considering an HTML object like this:

<div id="myDiv" class="c1 c2 c3 c4 c5"></div>

how can I get an array of strings, using jquery, from the "class" attribute of the "div" element?

Example:

var a = $('#myDiv').getClassArray(); //Not working,just an example

return a;  //[c1,c2,c3,c4,c5]

I thought I could read the "class" attribute and then split the string, but it seems too verbose, I wondered if there was a shorter and more elegant method.

You could always make a plugin to do this, if it is a frequent need. — Brett Zamir
– Brett Zamir, Commented Jan 4, 2013 at 11:28
@ameyarote I forget the '#' character, you're right, but it was just a sample code — benVG
– benVG, Commented Jan 4, 2013 at 11:32

Adil · Accepted Answer · 2013-01-04 11:44:51Z

8

You need # for id selector and use split() to get array from string.

Live Demo

var a = $('#myDiv').attr('class').split(' ');

You can iterate through array using jQuery jQuery.each() of for loop.

var a = $('#myDiv').attr('class').split(' ');

$.each(a, function(index, item){
    alert(item);
});

edited Jan 4, 2013 at 11:44

answered Jan 4, 2013 at 11:26

Adil

148k25 gold badges217 silver badges207 bronze badges

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

4 Comments

fdiv_bug Over a year ago

shouldn't it be $('#myDiv') instead of $('myDiv')?

benVG Over a year ago

I forget the '#' character,i know, you're right, but it was just a sample code

amustill Over a year ago

This solution doesn't account for multiple spaces between class names. $('#myDiv').attr('class').replace(/\s+/g, ' ').split(' '); would take this in to account.

Adil Over a year ago

No worries, you can will have array in a

Brett Zamir · Accepted Answer · 2013-01-04 15:33:11Z

3

The new standard classList property would allow such easy access on DOM elements (e.g., through $('#myDiv')[0].classList in jQuery), but it is not universally implemented. See here for documentation on this standard or here for current browser support.

Providing such functionality as a shim was proposed for jQuery in bug 7378, but was rejected.

You could however, get such support via a shim, such as perhaps https://github.com/eligrey/classList.js

Updated: A demo with the shim is at http://jsfiddle.net/brettz9/WWs5B/1/

edited Jan 4, 2013 at 15:33

answered Jan 4, 2013 at 11:37

Brett Zamir

14.4k7 gold badges57 silver badges85 bronze badges

3 Comments

benVG Over a year ago

This seems to be interesting ... unfortunately, considering that has bugs, I can not use it, but could be useful in the future,tx!

Brett Zamir Over a year ago

What has bugs? If you are talking about jQuery, that is just a feature request (which was denied), not a bug. What I am talking about is a feature not yet supported in all browsers, but if you add a script tag for the classList.js shim, it should let you use it as I described.

Brett Zamir Over a year ago

I've updated the answer to link to this demo: jsfiddle.net/brettz9/WWs5B/1

Jai · Accepted Answer · 2013-01-04 11:32:19Z

2

Why don't you try this: http://jsfiddle.net/egZ2z/

var cls = $('#myDiv').attr('class');
var n = cls.split(' ')
alert(n);

answered Jan 4, 2013 at 11:32

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Get the "class" attribute of an object split into an array of strings

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related