jQuery: Get class name from multiclass element

Question

I've selected the following element. What's the best way to get the class name icon_23123?

<div class="icon icon_23123"></div>

Is there something like [class^="icon_"] to select attributes instead of elements? Or should I get all the class names, and loop through to find one that begins with icon_?

EDIT: I want to write a function that gets any class name starting with icon_, and only those class names. Ultimately, I want to get the portion after the underscore, but it's not necessarily numeric- my plan was to use a regex (these class names are regular.)

EDIT2: The element I'm trying to get the class name from is already selected, I just need the class name from it (not every element in the document with a class="icon_.....")

EIDT3: My real problem was that I mixed data and styling. Since I don't care to support older browsers, I'm using data-id to hold the id of this datum.

<div class="icon icon_23123" data-id="23123"></div>

Marat Tanalin · Accepted Answer · 2018-03-11 17:08:48Z

3

If you use classes to store data, HTML5 provides a more convenient way to attach data to an element — data- attributes. For example:

<div class="icon" data-id="23123"></div>

Then you can read the attribute directly (the most cross-browser way):

var id = myelement.getAttribute('data-id');

or use the native dataset property object:

var id = myelement.dataset.id;

or use the jQuery’s data() method for older browsers (IE10-):

var id = $(myelement).data('id');

It is also possible to use the same data- attribute to attach individual styles to the element via an attribute selector like .icon[data-id="23123"].

edited Mar 11, 2018 at 17:08

answered Mar 4, 2012 at 0:17

Marat Tanalin

14.2k1 gold badge38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thalecress Over a year ago

I am using the class for styling, but your suggestion is helpful.

Marat Tanalin Over a year ago

You can attach individual styles to element via attribute selector: .icon[data-id="23123"], thus using data- attribute for both purposes.

Lea Rosema · Accepted Answer · 2012-03-04 00:51:56Z

1

use .attr() combined with .each():

$('[class^="icon_"]').each(function () { console.log($(this).attr('class'); });

This passes all elements which have a class name that starts with icon_ and pass it to the each function. You can then access the attribute of the element using .attr. If you only need to access the nth element, you could use $('[class^=icon_]:eq(n)').attr('class')

edit (answer to comment):

var classes = $(selectedElement).attr('class'),
    iconIndex = classes.indexOf('icon_'),
    iconIndex2 = classes.indexOf(' ', iconIndex),
    theClassName = classes.slice(iconIndex, (iconIndex2 > -1) ? iconIndex2 : undefined)

API documentation: each attr

edited Mar 4, 2012 at 0:51

answered Mar 4, 2012 at 0:00

Lea Rosema

1,15018 silver badges32 bronze badges

2 Comments

Thalecress Over a year ago

But there are 2 classes on the selected element. I only want the class name that begins with icon_.

Lea Rosema Over a year ago

late here (my brain hurts ^^) ;) better than looping through the classnames should be a combination of indexOf and slice - this should do the job :)

Collectives™ on Stack Overflow

jQuery: Get class name from multiclass element

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related