Use jQuery to get a specific CSS class

Question

I have an element with some CSS rules applied as follows:

<span class="rule1 rule2 rule3[foo/bar]"></span>

I can use jQuery to retrieve the full class list using:

var classes = $("span").attr('css');

How do I select a specific rule, in this case rule3 complete with its array contents?

A class name with array contents? That kind of notation is new to me. Where do you have it from? And what do you mean by "select" - do you want to determine whether a specific link has this class? — Pekka
– Pekka, Commented Apr 4, 2011 at 9:36
Select as in grab rule3 and therefore be able to use the contents of the square brackets in a script. I've inherited the class rules & it's too late to change them all to use jQuery data() instead. — bcmcfc
– bcmcfc, Commented Apr 4, 2011 at 9:58

jAndy · Accepted Answer · 2011-04-04 09:40:43Z

3

You should not use a css class to store information. jQuery offers the feature to store all kinds of data into data-XXX propertys which in turn, are pulled into jQuerys .data() expando propertys.

In your example, this could look like

<span data-rules='{"rule1":"foo","rule2":"bar","rule3":"baz"}'></span>

This is a JSON-stringified version of your logic. By querying that node with jQuery like

var myspan = $('span');

you can now access this data attribute by calling

myspan.data('rules').rule3 // === "baz"

Reference: http://api.jquery.com/data/ (section: HTML 5 data- Attributes)

answered Apr 4, 2011 at 9:40

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

Comments

Robin Maben · Accepted Answer · 2011-04-04 09:42:35Z

2

You could do..

var arr = $('span').attr('class').split(" ");

And then iterate over them as you wish.. arr[i]

answered Apr 4, 2011 at 9:42

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

1 Comment

Robin Maben Over a year ago

But I agree with Peeter. Using jQuery's .data() would be a much more efficient practice.

Peeter · Accepted Answer · 2011-04-04 09:40:28Z

0

I'd considering using the html5 data attribute instead.

Read up on http://html5doctor.com/html5-custom-data-attributes/

answered Apr 4, 2011 at 9:40

Peeter

9,3825 gold badges39 silver badges53 bronze badges

Comments

littlealien · Accepted Answer · 2011-04-04 09:49:12Z

0

try this;

$('span[class~="rule1"]')

also you can try this one;

$('span.rule1')

answered Apr 4, 2011 at 9:49

littlealien

4294 silver badges12 bronze badges

Collectives™ on Stack Overflow

Use jQuery to get a specific CSS class

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related