How to get the second class name from element?

I'm trying to find out how to retrieve the second class name of a class attribute.

For example, having:

<div class="something fooBar"></div>

How can I get the second class named "fooBar" ?

^{I know you can add, remove, and check a specific class but I couldn't find documentation how to retrieve a second class into a variable.}

You can use split like this:

alert($('#divID').attr('class').split(' ')[1]);

To get all classes, you can do this instead:

var classes = $('#divID').attr('class').split(' ');

for(var i=0; i<classes.length; i++){
  alert(classes[i]);
}

More Info:

• http://www.w3schools.com/jsref/jsref_split.asp

// alerts "8"
alert($('<div class="something 8"></div>').attr('class').split(' ')[1]);

This is how you would do it by referencing a div ID

$(document).ready( function () {
  alert($('#yourDivID').attr('class').split(' ')[1]);
});

The split function will allow you to split a string with the specified delimiter. This will return an array of your separated values. In this case will return an array of classnames.

Reference for split an other string methods http://www.javascriptkit.com/javatutors/string4.shtml

You should look into the following jQuery Selectors and Functions for accessing classes

Selectors

http://api.jquery.com/class-selector/ select a dom element with the specified class

http://api.jquery.com/has-selector/ select a dom element that has the specified selector

Functions

http://api.jquery.com/addClass/ method to add a class to a jQuery object

http://api.jquery.com/removeClass/ method to remove a class to a jQuery object

http://api.jquery.com/toggleClass/ method to toggle a class to a jQuery object

http://api.jquery.com/hasClass/ method to check if a jQuery object has the specified class

http://api.jquery.com/attr/ method to retreive attributes of a jQuery object

Edited: Nice cheat sheet

as an alternative, it's always better practice to use the data-* html attributes to keep track of states, e.g $("div.example").data("active")

You can get the value of the class attribute and split it on space.

secondClass = element.className.split(' ')[1];

This is not correct. If classes separated more than one space and you have get second class you get empty. Example:

<div class="something   fooBar"></div>
var classes = $('div').attr('class').split(' ');
alert('classes: ' + classes + '; length: ' + classes.length );
// classes: something,,,fooBar; 4 

I use the next code:

/*
 *   el  - element
 *   num - class number
 */
function getNumClass(el, num) {

  var classes = el.split(' ');
  var newclasses = [];
  var ret;

  for (var i = 0; i < classes.length; i++) {

    ret = $.trim(classes[i]);
    if(ret.length > 0) {
      newclasses.length += 1;
      newclasses[newclasses.length-1] = ret;
    }
  }

  if (num > newclasses.length) return false;

  return newclasses[num - 1];
}

You can use your spilt like

alert($('#divID').attr('class').split(' ')[1]);

Then you can do this

 var classes = $('#divID').attr('class').split(' ');

for(var i=0; i<classes.length; i++){
  alert(classes[i]);
}

Source javascript split string