37

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?

Improve this question
1
  • 3
    Can you post a sample of your HTML markup? Commented Sep 28, 2011 at 18:49

5 Answers 5

Reset to default
73

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']");
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I'd recommend the first selector over the latter one.
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.
I just posted an example jsfiddle jsfiddle.net/frxyqzw3/2 showing the class* idea
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").

Improve this answer

Comments

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

Comments

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.

Improve this answer

3 Comments

Only the first class="" attribute will be read by the browser, let alone jQuery.
That's the point I meant to get across with this answer, is it not clear enough?
I just wanted to clarify that jQuery won't actually see any further class=""es due to the browser's HTML parser ignoring them.
0

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

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

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

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.