jQuery-How to improve this code
I have one jQuery code and need some help from u guys to improve performance. HTML:
<div class="mydiv">
<div class="indiv">
<span>
myspan
</span>
<a href="#">
a1
</a>
<a href="#">
a2
</a>
</div>
<table &g开发者_开发技巧t;
..................
</table>
</div>
Now I wantto know the following. 1.Now for working with a particular range of tr, I am coding like
var $myrows = $(".mydiv table tr").slice(index);
$($myrows , this).jQueryFunction()
The code is working fine, but I think $(".mydiv table tr") will make the browser traverse total DOM, so should I go for $(".mydiv table tr",this).jQueryfunction() //I think this will improve performance,instead of using var$myrows.
I think 2 nd one is good.
2.$(".mydiv .indiv a",this).click(function(event) this click is not working , if I remove this it will start working.why?
3.I have to select one specific tr, for that I am using
$(".mydiv table tr:nth-child(that specific child)") Any better way of doing this?Also in this case it will traverse the DOM. Thanks.
use
:gt(3)
filter to get all instances with an index greater than 3 in the collection:var $myrows = $(".mydiv table tr:gt(" (index-1) + ")")
the reason it will not working is probably because
this
is something different than you expect.this
, the way you're using it, will need to be a subset of your code, that contains anything that matches your selector. If, say,this
is not a node that contains an element of classmydiv
, then the selector will not return any rows. It is the same thing as writing$(this).find('.mydiv .indiv a');
So if
this
is your.mydiv
, for instance, you need to remove that part from your selector. There's a chancethis
is something else entirely. Whatever it is, that is your source of error. Find out what it is, and then you'll be able to find out how to fix it.Your way of doing it is just fine.
EDIT
I considered going back and editing my previous points, but I think I just need to make an all-covering amendment here. What you're dealing with, in all of these questions, is concerns of how to traverse only a specific set of the DOM, by passing that as the context
parameter to the $
function. In #2, your problem is caused by passing an invalid context. What the invalid context is, and what it should be changed to, is impossible to say without seeing more code. In #1 and #3 you're just looking for advice on how to use the context parameter at all. So let me just make some general remarks here.
The syntax
$(selector, context);
is exactly the same thing as calling
$(context).find(selector);
if that clears things up for you.
So $('.indiv a', $('.mydiv')[0])
and $('.mydiv:first').find('.indiv a')
will yield the exact same result, and they will both execute just as quickly. You specify that the search is to be carried out within the first instance of .mydiv
in the DOM. Note that you will always be traversing the entire DOM to find that element; but once you've done that, your search will be narrowed to within that. So yes, this is generally a good way to go about, if you know this will give you the result you're after.
Of course telling jQuery to look for something in a specific node, rather than in the entire DOM, does not only alter performance, but also potentially alters your result set. So whether or not this is desirable is up to you; only you have sufficient knowledge of your code to be able to tell if this approach will work for you.
If you want to call jqueryFunction
on a subset of all tr
elements within a specific table
, you can use
var mySpecificTable = $('.mydiv .indiv .table').eq(0);
$(mySpecificTable).find('tr:gt('+(index-1)+')').jqueryFunction();
...or any other way in which you may want to rephrase that. Note that the find
approach works on a jQuery object such as one returned by $('table:first')
, and the context
approach works on a DOM node such as one returned by $('table')[0]
The same genral idea goes for your question #3; $('tr:nth-child(3)', myDOMNode)
is as good as $('tr', myDOMNode').eq(3)
is as good as myQueryObject.find('tr').eq(3)
etc...
Hope that clears things up.
精彩评论