5

If I have a div which has multiple classes assigned to the class attribute, is it possible to iterate through them using the each() function in jQuery?

<div class="class1 differentclassname anotherclassname"><div>
Curtis Crewe
  • 4,126
  • 5
  • 26
  • 31
  • 3
    Something like `$('div').prop('className').split(' ').forEach(fn)`? – Ram Jun 19 '14 at 01:13
  • @undefined I've updated my question as I forgot to state that I don't know the class names that'll be used as they're placed dynmacially – Curtis Crewe Jun 19 '14 at 01:14
  • @CurtisCrewe - That shouldn't affect what undefined said (you're splitting the className property, and then forEaching through the list. Should work fine (even if you don't know the class names before) – Jack Jun 19 '14 at 01:15
  • 1
    Why do you need jQuery? `element.className.split(' ').forEach(...)` will work in every browser that supports *forEach*, and it's easy to [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) those that don't. – RobG Jun 19 '14 at 01:23
  • Possible duplicate of [Get class list for element with jQuery](https://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery) – Bob Stein Jan 27 '18 at 22:24

2 Answers2

19

In JavaScript, to get the list of classes, you can use

  • .className.split(' '), returns an Array
  • (HTML5) .classList, returns a DOMTokenList

In jQuery, you can use .prop() to get className or classList properties.

To iterate them, you can use:

  • A for loop, e.g. for(var i=0; i<classes.length; ++i)
  • (ES6) A for...of loop, e.g. for(var cl of classes).
  • (ES5) forEach, only for arrays, e.g. classes.forEach(fn)
  • (jQuery) $.each, e.g. $.each(classes, fn)

If you use classList but want to iterate using forEach, you can convert the DOMTokenList into an Array using

  • [].slice.call(classes)
  • (ES6) Array.from(classes)
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Keep in mind that forEach in javascript is IE9+, I always get caught using it and I'm stumped as to why my code's broken in older browsers. +1 for a detailed answer :) – Prusprus Jun 19 '14 at 01:39
  • So which prop() is proper? `.prop('class')` or `.prop('className')` or `.prop('classList')` – Bob Stein Jan 27 '18 at 21:59
  • 1
    @BobStein-VisiBone Use `.prop("className")` or `.attr("class")` to get a space-separated string. Or `.prop("classList")` to get a DOMTokenList. – Oriol Apr 02 '18 at 18:29
3

First you need to get an string that contains the classes with:

$('div').attr('class');

and split it with blank spaces to get an array with:

$('div).attr('class').split(' ');

and then use that array as the first argument to an $.each function where the index and the value can help you to handle it independently

$.each($('div').attr('class').split(' '), function(index, value) {
    console.log('Class name ' + value);
});
Roberto Aguilar
  • 2,054
  • 1
  • 14
  • 13
  • Better: `$('div).attr('class').split('\s+');` In case the class attribute has multiple consecutive spaces, or other whitespace characters. – Bob Stein Jan 27 '18 at 21:56