getting a specific class name of an element with multiple classes

Question

Lets say I have this in my html:

<div id="myDiv" class="a b-32"/>

I'm trying to get the index of 'b' class (in my example '32')

The only way I know how to do it is by:

var index;
var myDiv = $("#myDiv").attr("class");
var classes = myDiv.split(' ');
for(var i=0; i<classes.size(); i++){
    if(classes[i].matches((b-)+[\d]*) ){
        index = classes[i].replace("b-","");
    }
}
alert(index);

Is there any solution that doesn't imply iterating all the classes manually? Because my solution seems dull. Surely there must be a better way, I just can't find it.

Question is NOT a duplicate of http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery — Niet the Dark Absol, Jun 12 '14 at 14:17
Why you using int dataType inside for loop ... do you think Is it right in jQuery — kamesh, Jun 12 '14 at 14:22
@AlexandruSeverin: Re kamesh's comment, you have `for(int i =0...` in your question. As this is JS, that should be `var` (or `let` in ES6). — T.J. Crowder, Jun 12 '14 at 14:30

Niet the Dark Absol · Accepted Answer · 2014-06-12T14:22:13.553

4

Y'know, for all that people claim jQuery makes it so you have to write less code, Vanilla JS is surprisingly good at one-liners :p

alert((document.getElementById('myDiv').className
                                         .match(/(?:^| )b-(\d+)/) || [0,0])[1]);

(Whitespace added for readability)

Returns 0 in the event where myDiv doesn't have a b-number class.

EDIT: As @A.Wolff pointed out in a comment on your question, you may wish to consider this:

<div id="myDiv" class="a" data-b="32"></div>

Then you can get:

alert(document.getElementById('myDiv').getAttribute("data-b"));

edited Jun 12 '14 at 14:22

answered Jun 12 '14 at 14:17

Niet the Dark Absol

320,036
81
464
592

Beware using `\b` with classes, there are several characters that are valid in class names that `\b` treats as word boundaries, `-` being the most problematic. – T.J. Crowder Jun 12 '14 at 14:21
@T.J.Crowder How's that? Better now? – Niet the Dark Absol Jun 12 '14 at 14:22
`className.match(/(b-\d+)/g)[0].substr(2)` – pawel Jun 12 '14 at 14:24
@pawel: That fails to account for `class="somethingunrelatedb-32"` – T.J. Crowder Jun 12 '14 at 14:25
2

Oh, that data-* attribute is even better and solves a lot of problems. – Alexandru Severin Jun 12 '14 at 14:27
@NiettheDarkAbsol: I suppose. I'm not a huge fan of the `|| [0,0]` thing, but there's nothing really wrong with it. The change kinda makes my answer retroactively a dupe. :-) – T.J. Crowder Jun 12 '14 at 14:27
@T.J.Crowder Whoops :p Yeah, I'm not a huge fan of it either, but a well-commented one-liner can be better than the lengthy alternative. But `data-` is best here ^_^ – Niet the Dark Absol Jun 12 '14 at 14:28
@NiettheDarkAbsol: Agreed a `data-*` is the much better choice. I don't see any particular value in one-liners. They usually lack clarity, are hard to debug, and encourage things like the `|| [0,0]`. – T.J. Crowder Jun 12 '14 at 14:29

T.J. Crowder · Answer 2 · 2014-06-12T15:16:08.150

0

A regular expression can help:

var index;
var myDivClasses = $("#myDiv").attr("class");
var cls = myDivClasses.match(/(?:^| )b-(\d+)(?:$| )/);
if (cls) {
    index = cls[1];
}

(Use parseInt if you want it as a number.)

That looks for b-### where ### is one or more digits, with either whitespace or a boundary (start of string, end of string) on either side, and extracts the digits.

edited Jun 12 '14 at 15:16

answered Jun 12 '14 at 14:23

T.J. Crowder

1,031,962
187
1,923
1,875

getting a specific class name of an element with multiple classes

2 Answers2