Menu
I have following structure
<ul id="tabs" class="nav nav-tabs"> <li><a href="#aaa" hashval="aaa">AAA</a></li> <li><a href="#bbb" hashval="bbb">BBB</a></li> <li><a href="#ccc" hashval="ccc">CCC</a></li> <li><a href="#ddd" hashval="ddd">DDD</a></li> </ul> Now I am operating on the anchor tag by following code and which is working fine.
$('#tabs a[href="#ddd"]').tab('show'); I am using pycharm which adds warning for the line by saying "Preface with ID selector". When I click it, pycharm changes to following
$('#tabs').find('a[href="#ddd"]').tab('show'); Both are working fine but I don't understand the difference.
What is the difference in both or more specifically what is difference between $('#tabs a[href="#ddd"]') and $('#tabs').find('a[href="#ddd"]')?
334
Difference between this and $(this)The this Keyword is a reference to DOM elements of invocation. We can call all DOM methods on it. $() is a jQuery constructor and in $(this), we are just passing this as a parameter so that we can use the jQuery function and methods.
this is a reference to the html DOM element that is the source of the event. $(this) is a jQuery wrapper around that element that enables usage of jQuery methods. jQuery calls the callback using apply() to bind this .
$(...) is an expression that starts a new subshell, whose expansion is the standard output produced by the commands it runs. This is similar to another command/expression pair in bash : ((...)) is an arithmetic statement, while $((...)) is an arithmetic expression. Follow this answer to receive notifications.
There is no difference at all. Do you have an example of what you're trying to do? They should be interchangeable. If you've something different please post it.
$("#tabs a") evaluates from right to left - which is the native direction of both Sizzle selector engine and querySelectorAll - i.e. first it finds all of the anchor elements in the page and then narrows it down to those under #tabs.
$("#tabs").find("a") evaluates - more intuitively - from left to right, i.e. first it finds #tabs, and then only the anchor elements under it.
Clearly the latter would yield better performance, but it would only be noticeable accumulatively; that is, if you run thousands of queries. Otherwise, the difference is negligible.
106
As stated in "Increase Specificity from Left to Right":
A little knowledge of jQuery’s selector engine is useful. It works from the last selector first so, in older browsers, a query such as:
$("p#intro em");loads every em element into an array. It then works up the parents of each node and rejects those where p#intro cannot be found. The query will be particularly inefficient if you have hundreds of em tags on the page.
Depending on your document, the query can be optimized by retrieving the best-qualified selector first. It can then be used as a starting point for child selectors, e.g.
$("em", $("p#intro")); // or $("p#intro").find("em");
But Test case says $("#tabs > a") would be fastest
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
