jquery find element by specific class when element has multiple classes

Question

So I am working on something that wasn't well thought out in the build from the backend team. That leaves me with a document full of divs.

What I am doing is rolling back from the element I need to click on, get the parent container then find an element within the parent which has class="alert-box warn", class="alert-box dead", etc... Essentially, I'm trying to use multiple class selectors on each element. When I try to find just alert-box it doesn't seem to be working right. I'm assuming because it has warn,dead, ``fine, etc...

How can I find just alert-box* or equivalent to a wildcard concept?

Can you post a sample of your HTML markup? – Frédéric Hamidi Sep 28 '11 at 18:49 — Frédéric Hamidi, Sep 28 '11 at 18:49

John Hartsock · Accepted Answer · 2011-09-28T18:53:45.147

74

You can combine selectors like this

$(".alert-box.warn, .alert-box.dead");

Or if you want a wildcard use the attribute-contains selector

$("[class*='alert-box']");

Note: Preferably you would know the element type or tag when using the selectors above. Knowing the tag can make the selector more efficient.

$("div.alert-box.warn, div.alert-box.dead");
$("div[class*='alert-box']");

edited Sep 28 '11 at 18:53

answered Sep 28 '11 at 18:47

John Hartsock

85,422
23
131
146

I'd recommend the first selector over the latter one. – Bojangles Sep 28 '11 at 18:51
1

You can also substitute the *= for ^= if you are interested in making sure the element's class "begins with" alert-box rather than just "contains" alert-box. – Carvell Fenton Sep 28 '11 at 19:01
I just posted an example jsfiddle https://jsfiddle.net/frxyqzw3/2/ showing the class* idea – Shadi Dec 06 '16 at 07:28

score 11 · Answer 2 · answered Sep 28 '11 at 18:54

11

You can select elements with multiple classes like so:

$("element.firstClass.anotherClass");

Simply chain the next class onto the first one, without a space (spaces mean "children of").

answered Sep 28 '11 at 18:54

Bojangles

99,427
50
170
208

score 5 · Answer 3 · answered Sep 28 '11 at 18:49

5

var divs = $("div[class*='alert-box']");

answered Sep 28 '11 at 18:49

Igor Dymov

16,230
5
50
56

score 3 · Answer 4 · answered Sep 28 '11 at 18:48

3

An element can have any number of classNames, however, it can only have one class attribute; only the first one will be read by jQuery.

Using the code you posted, $(".alert-box.warn") will work but $(".alert-box.dead") will not.

answered Sep 28 '11 at 18:48

Kevin B

94,570
16
163
180

Only the first `class=""` attribute will be read by the browser, let alone jQuery. – Bojangles Sep 28 '11 at 18:52
That's the point I meant to get across with this answer, is it not clear enough? – Kevin B Sep 28 '11 at 19:49
I just wanted to clarify that jQuery won't actually _see_ any further `class=""`es due to the browser's HTML parser ignoring them. – Bojangles Sep 28 '11 at 20:44

score 0 · Answer 5 · answered Sep 28 '11 at 18:48

0

you are looking for http://api.jquery.com/hasClass/

<div id="mydiv" class="foo bar"></div>

$('#mydiv').hasClass('foo') //returns ture

answered Sep 28 '11 at 18:48

isJustMe

5,452
2
31
47

5

No, he's not - he wants to select elements based on which class they have, not to see whether an element he's got has a class or not. – Bojangles Sep 28 '11 at 18:52

jquery find element by specific class when element has multiple classes

5 Answers5

Linked