CODEWITHSUNDEEP
jquery-selectors
codepuppy
codepuppy

Reputation: 1140

Selecting Multiple Classes in Jquery

I see some posts on this same issue but would like further clarification as I cannot get any of these answer to work especially as I can't pick the answer out of the Jquery documentation.

I want to combine some classes for the convenience of cascading appropriate styling. I could simply replicate the styling in a single class but I am assuming that that would be bad practice. 

<div class="left_Item drop_Down" id="col_1">some stuff</div>

$(".left_Item, .drop_Down#col_1").whatever....; 
// matches every occurrence of class left_Item with the single occurrence of    //drop_Down#col_1   ... this tallies with the multiple selector documentation.

$("#col_1").whatever....;
//obviously does match as the selector is only looking at the id.
//however
$(".drop_Down#col_1").whatever....; 
//does not match  Does this imply that the classes cannot be matched separately? So....
$(".left_Item.drop_Down#col_1").whatever....;
// various posts on so state that this should match it does not for me. Nor does
$(".left_Item .drop_Down#col_1").whatever....;


$(".left_Item").filter(".drop_Down#col_1).whatever....;
// various posts on so state that this should match also but it does not for me.

So firstly I assume that I am doing the correct thing using multiple classes. If not I'll stop trying to make this work!

Secondly please can some one give the correct jquery syntax to match an element with multiple classes.

Thx

Upvotes: 0

Views: 138

Answers (2)

to StackOverflow
to StackOverflow

Reputation: 124696

The syntax is as follows (for CSS or jQuery):

.class1.class2

In your case:

$(".left_Item.drop_Down").whatever...

If you want to use an id as well as a class selector, then put the id first:

$("#col_1.left_Item.drop_Down")

Though since ids are supposed to be unique, I don't understand why you don't just use $("#col_1")

Upvotes: 1

Robert Wilson
Robert Wilson

Reputation: 669

If the classes are your main focus then try this.

$('.left_Item.drop_Down').whatever...

But if you want an Id that has classes left_Item drop_Down you might do this

$('#col_1.left_Item.drop_Down').whatever...

Upvotes: 0

Related Questions