jquery, selector for class within id

Jquery

Jquery Problem Overview


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 ]")

Jquery Solutions


Solution 1 - Jquery

You can use the class selector along with descendant selector

$("#my_id .my_class")

Solution 2 - Jquery

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.

Solution 3 - Jquery

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

Solution 4 - Jquery

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

Solution 5 - Jquery

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

Solution 6 - Jquery

You can use find() :

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

Or maybe:

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

Both methods will word for what you want

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser984003View Question on Stackoverflow
Solution 1 - JqueryArun P JohnyView Answer on Stackoverflow
Solution 2 - JquerydoppelgreenerView Answer on Stackoverflow
Solution 3 - JqueryNiks JainView Answer on Stackoverflow
Solution 4 - JqueryPavlo OliinykView Answer on Stackoverflow
Solution 5 - JqueryThirumalai muruganView Answer on Stackoverflow
Solution 6 - JqueryHygison BrandaoView Answer on Stackoverflow