CODEWITHSUNDEEP
jquerycss-selectors
Chris
Chris

Reputation: 1695

jquery -- confused about selectors

Greetings,

This newbie needs clarification. Consider this bit of script...

   $("h3").click(function(){
        $(this).addClass("silver");
    });

If this is more that one h3 DOM element in my page, the above script will apply to all elements, correct?

If so, is there a way to "target" a specific DOM element (per my example) while excluding others? I am wondering if chaining selectors would become applicable in this case e.g.

   $("h3 fieldset a").click(function(){
        $(this).addClass("silver");
    });

Would it be the proper approach??

Thanks for your input.

Upvotes: 0

Views: 206

Answers (8)

Ken
Ken

Reputation: 11

Yes, using the "h3" selector will add a click event to all h3 tags on the page.

You can chain selectors like you are doing in your second example but you will incur some extra overhead in jQuery as it tries to parse and search the DOM for matching elements. The best option would be to add an id to the h3 tag you are targeting and use something similar to the following:

$("#h3Id").click(function(){
    $(this).addClass("silver");
});

Upvotes: 1

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

Put an id on the element to select a single element.

<h3 id="make-silver">text</h3>

$("h3#make-silver").click(function(){
    $(this).addClass("silver");
});

Upvotes: 1

Marco Leo
Marco Leo

Reputation: 516

You scould give a class to the h3:

So you will select that item like this: $(".reto").

Upvotes: 0

Dave
Dave

Reputation: 2417

To answer your first question, yes, $("h3") will apply to ALL H3 elements.

To narrow your selection, you have a whole range of options. See all of them here: jQuery Selectors. The best option would be to assign the element you are interested in targeting an ID.

 <h3 id="firstSection">Headline!</h3>

And you can then access it like this:

 $("#firstSection")

Or you can do something more quick and dirty like this if you know you only want the first H3 element

 $("h3:first")

Upvotes: 1

James South
James South

Reputation: 10635

That's exactly how you would go about it.

Try to think of you selectors in the same way you would select an object in css.

It's often a good idea to be as specific as possible when applying a selector to keep jQuery zippy.

basic rules are this

$("h3 fieldset a").click(function(){
        $(this).addClass("silver");
    });

would select a hyperlink within a fieldset within a h3 tag... (not sure if that's valid html though)

whereas

$("h3, fieldset, a").click(function(){
        $(this).addClass("silver");
    });

would ad the class silver to the h3 the fieldset and the hyperlink.

simples!

Upvotes: 1

user406905
user406905

Reputation: 1418

well you could add a class to the exact H3 you want to target. OR you can select an element that contains the H3 you want to target, and then use .find() to get the H3

sample code:

$('.classOnTargetH3').click(....);

OR

$('elementImediatlySouroundingH3').find('h3').click(....);

Upvotes: 0

simshaun
simshaun

Reputation: 21466

If this is more that one h3 DOM element in my page, the above script will apply to all elements, correct?

Yes

If so, is there a way to "target" a specific DOM element (per my example) while excluding others?

Yes. There are many ways. Check out the jQuery selectors documentation to get an idea of how you can limit the elements selected.

Upvotes: 1

SLaks
SLaks

Reputation: 887225

Your question is unclear.

You may be looking for the :not() selector, or you may be trying to filter elements by ID or classname.

The documentation contains a complete list of selectors, with examples.

Upvotes: 0

Related Questions