Response title
This is preview!
Move this topic
Whats the difference between these selectors?
in Getting Started
•
10 years ago
I noticed 2 different selector patterns but can't work out what the difference is.
Parent Div = ".mydiv"
1) - $(a, .myDiv)
2) - $(.myDiv a)
Anyone?
Parent Div = ".mydiv"
1) - $(a, .myDiv)
2) - $(.myDiv a)
Anyone?
1
Replies(2)
Re: Whats the difference between these selectors?
10 years ago
The first $("a", ".mydiv") selects all anchor tags that are within the context ".mydiv"
The second selects all anchor tags that are descendants of ".mydiv"
they both do the same thing, they just take a different function path to get there.
Use whichever one makes the most sense in your code.
Use whichever one makes the most sense in your code.
I prefer the second one.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Re: Whats the difference between these selectors?
10 years ago
Hi.
I am guessing you have some html a bit like this...
- <div>
- <div>
- <div id="myDivX" class="myDiv">
- <a id="myAnchorX" class="myAnchor" href="#">jQuery Website</a>
- <!--other content-->
- </div>
- <!--more content-->
- </div>
Neither of your examples would work, anyway, because you have not put your selectors within quotes.
When you are selecting something, the most common syntax is: $(selectorString, contextObject)
contextObject is optional. It tells the selectorString where you wish to search. If contextObject is not provided then the selectorString will search entire document.
selectorString can have nested phrases, and can select multiple things at same time.
It is best to use class names to select multiple similar items, because you can only ever have one ID with the same name.
For example, there are many ways to locate the <a> tag, the most basic are....
- $(".myAnchor") //seek elemntss using this class name; there could be multiple elements
- $("#myAnchorX") //seek it using ID; you must only ever have one element per ID name
- $("a") //seek all <a> tags
If you wish to find two items at the same time you could use:-
- $(".myAnchor, myDiv") //seek all elemnts have either of these class names
Going back to your two cited examples:-
1) $(a, .myDiv)
It would not work as it is. It is ambiguous right now, because you could correct it by writing either as $("a", ".myDiv") or $("a, .myDiv"). In the first case it will find all the <a> tags within elements having a class name of "myDiv", whereas written the second way it will search within the entire document and find all the <a> tags plus all the elements having a class name of "myDiv".
2) $(.myDiv a)
Again, this would not work without quotes. But at least it is not ambiguous. It should be written as $(".myDiv a") and it will find, within the entire document, all <a> tags that are descendents (children, grandchildren, great-grandchildren....) of all element having a class name of "myDiv".
Hope this helps. Pleas ask if you need further elaboration, or answers about other aspects too.
Regards,
Alan
Leave a comment on alano999's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to johnohara's question
Statistics
- 2 Replies
- 2030 Views
- 1 Followers