jQuery - get the first class only from a element

Question

The element looks like this:

<li class="blah active"> ... </li>

jQuery.attr('class') will return both classes. How can I get only the 1st class ('blah' in this case) with jQuery?

the problem is, that if you add/remove classes via jquery, it will not save the correct order of the items. so maybe you want to check, if that class is in the list, instead of getting the first one. — cRichter, Jul 08 '10 at 13:24
In general I would not trust all browsers to give them back to you in the same order. — Matt Evanoff, Jul 08 '10 at 13:37

score 137 · Accepted Answer · edited Jun 16 '14 at 07:01

137

You need to split that into an array:

console.log(jQuery('selector').attr('class').split(' ')[0]);

edited Jun 16 '14 at 07:01

Madara's Ghost

answered Jul 08 '10 at 13:20

Sarfraz

4

Or use a regex: `var first = $('#foo').attr('class').replace(/^(\S*).*/, '$1');` – Pointy Jul 08 '10 at 13:28
In this case, you should use `prop` instead of `attr`. – Druska Apr 19 '13 at 15:23

score 9 · Answer 2 · answered Jul 08 '10 at 13:19

9

var first = jQuery.attr('class').split(" ")[0];

answered Jul 08 '10 at 13:19

gblazex

and he said "`jQuery.attr('class')` will return both classes", which indicates that by `jQuery` he meant an instance of the jQuery object, not the contructor function which invokes `jQuery.fn.init` – gblazex Jul 08 '10 at 13:36

score 2 · Answer 3 · edited Aug 31 '18 at 01:49

2

You can use the following to get the first class only from an element:

var firstClass = jQuery('selector')[0].classList[0]

edited Aug 31 '18 at 01:49

Grant Miller

answered Aug 30 '18 at 20:57

jackotonye

3 Answers3