CODEWITHSUNDEEP
jquery
user984003
user984003

Reputation: 29527

jquery, selector for class within id

Below, how should I select the elements that contain the class my_class within the element with id = "my_id"?

Note that the element may also have another class, which I am not selecting for.

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

was trying

$("#my_id [class*=my_class ]")

Upvotes: 106

Views: 177618

Answers (6)

Hygison Brandao
Hygison Brandao

Reputation: 718

You can use find() :

$('#my_id').find('.my_class');

Or maybe:

$('#my_id').find('span');

Both methods will work for what you want

Upvotes: 0

Pavlo Oliinyk
Pavlo Oliinyk

Reputation: 400

Also $( "#container" ).find( "div.robotarm" );
is equal to: $( "div.robotarm", "#container" )

Upvotes: 3

Thirumalai murugan
Thirumalai murugan

Reputation: 5896

I think your asking to select only <span class = "my_class">hello</span> this element, You have do like this, If I am understand your question correctly this is the answer,

$("#my_id [class='my_class']").addClass('test');

DEMO

Upvotes: 1

doppelgreener
doppelgreener

Reputation: 5094

Just use the plain ol' class selector.

$('#my_id .my_class')

It doesn't matter if the element also has other classes. It has the .my_class class, and it's somewhere inside #my_id, so it will match that selector.

Regarding performance

According to the jQuery selector performance documentation, it's faster to use the two selectors separately, like this:

$('#my_id').find('.my_class')

Here's the relevant part of the documentation:

ID-Based Selectors

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

The .find() approach is faster because the first selection is handled without going through the Sizzle selector engine – ID-only selections are handled using document.getElementById(), which is extremely fast because it is native to the browser.

Selecting by ID or by class alone (among other things) invokes browser-supplied functions like document.getElementById() which are quite rapid, whereas using a descendent selector invokes the Sizzle engine as mentioned which, although fast, is slower than the suggested alternative.

Upvotes: 53

Niks Jain
Niks Jain

Reputation: 1647

Always use 

//Super Fast
$('#my_id').find('.my_class');

instead of 

// Fast:
$('#my_id .my_class');

Have look at JQuery Performance Rules.

Also at Jquery Doc

Upvotes: 13

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the class selector along with descendant selector

$("#my_id .my_class")

Upvotes: 175

Related Questions