jQuery: Getting "secondary" class

Question

I'm using jQuery to loop through some elements in a document. These elements are of type <tr> with class .input-row. Some of the elements can also have a secondary class (for example .input-area).

I use $(".input-row").each() to loop through the elements, but how can I determine if the $(this)-element has a "secondary" class and if so, get the name of this?

use split. see: http://stackoverflow.com/questions/4239947/jquery-get-second-class-name — Kai Sternad, Oct 28 '11 at 07:44
If you need to *check* the class of an element you might be doing something wrong. Nowadays `class` is not meant to store data anymore - there is `data-whatever` for it (available via jQuery `.data('whatever')`). If you already need the class to apply formatting a check using `hasClass()` is absolutely fine though. — ThiefMaster, Oct 28 '11 at 07:50

michaeljdennis · Accepted Answer · 2011-10-28T09:40:16.017

4

$(".input-row").each(function(){
  $.each($(this).attr('class').split(/\s+/), function(i, v){
    if(v !== 'input-row'){
      alert(v);
    }
  });
});

edited Oct 28 '11 at 09:40

answered Oct 28 '11 at 07:45

michaeljdennis

602
1
7
12

2

The question asks "how can I determine if the $(this)-element has a "secondary" class and if so, get the name of this"... your example means you already know the name of the class – James Allardice Oct 28 '11 at 07:47

score 2 · Answer 2 · answered Oct 28 '11 at 07:46

2

You can get the list of all classes using attr, and you could simply get rid of the the class you used to select the elements:

$(".input-row").each(function() {
    var allClasses = $(this).attr("class"),
        otherClasses = allClasses.replace("input-row", "");  
});

If the element has more than two classes, then you will be left with a list of the other classes. To separate them, you could split on the spaces.

answered Oct 28 '11 at 07:46

James Allardice

164,175
21
332
312

1

`$(this).attr("class")` is equivalent to `this.className`. – Tomalak Oct 28 '11 at 07:50

score 1 · Answer 3 · answered Oct 28 '11 at 07:47

You can get all the classes on the element and then remove the one you know exists('input-row'), then you will be left with any other classes on that element.

$('.input-row').each(function() {
    var classes = $.trim($(this).attr('class').replace('input-row', ''));
    if (classes.length > 1) {
        alert(classes) // Names of all of the remaining classes
    }
}

If you want to get them individually, you can do classes.split(' ') to get an array.

score 0 · Answer 4 · answered Oct 28 '11 at 07:48

I prefer a declarative approach. You know which classes there can be, so write cases for them:

$(".input-row.input-area").each( /* ... */ );
$(".input-row.input-field").each( /* ... */ );

If you for some reason don't know the class name, you can extract it along the lines of:

$(".input-row").each(function () {
  var myClasses = this.className.split(" ");
  $.each(myClasses, function (i, className) {
    if (className != 'input-row') {
      alert(className); 
    }
  });
});

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

0

You could also do something like this to detect the number of classes:

var nc = $('#myId').attr('class').split(' ').length;

Then if nc is greater than 1:

$('#myID').attr('class').split(' ')[1]

should return the 'secondary' class

See a fiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 28 '11 at 07:50

m90

11,434
13
62
112

And what if that element doesn't have a 2nd class? – Richard Dalton Oct 28 '11 at 08:05
That's why I was checking the number of classes beforehand, but you are right: maybe this needs a little clarification. – m90 Oct 28 '11 at 08:09

score 0 · Answer 6 · answered Oct 28 '11 at 08:15

I'd go for this

var otherClasses = $('.input-row').attr('class').split(' ');
otherClasses.splice($.inArray("input-row", otherClasses),1);

Simply doing this

var otherClasses = $('.input-row').attr('class').replace('input-row', '').split(' ');

Will give you an extra string in the array with an empty value in it, because of the space behind "input-row"

jQuery: Getting "secondary" class

6 Answers6