Skip to content

Instantly share code, notes, and snippets.

@jeresig
Created December 18, 2009 19:06
Show Gist options
  • Save jeresig/259686 to your computer and use it in GitHub Desktop.
Save jeresig/259686 to your computer and use it in GitHub Desktop.
The difference between .closest(selector) and .closest([selectorA, selectorB, ...])
and how it works with .live() in 1.4.
Sample DOM:
<html>
<body>
<div id="main">
<div id="test">
<div id="mouseme"></div>
</div>
</div>
</body>
</html>
(#mouseme takes a mousemove)
Bound handlers:
$("#mouseme").live("mousemove", ...)
$("#main").live("mousemove", ...)
$("body").live("mousemove", ...) (plugin A)
$("body").live("mousemove", ...) (plugin B)
In jQuery 1.3.2:
#mouseme check on #mouseme (load Sizzle)
Return.
#main check on #mouseme (load Sizzle)
Walk up tree.
#main check on #test (load Sizzle)
Walk up tree.
#main check on #main (load Sizzle)
Return.
body check on #mouseme (load Sizzle)
Walk up tree.
body check on #test (load Sizzle)
Walk up tree.
body check on #main(load Sizzle)
Walk up tree.
body check on body (load Sizzle)
Return.
body check on #mouseme (load Sizzle)
Walk up tree.
body check on #test (load Sizzle)
Walk up tree.
body check on #main(load Sizzle)
Walk up tree.
body check on body (load Sizzle)
Return.
Sort all element results.
Loop through the results to trigger.
In jQuery 1.4:
#mouseme check on #mouseme (load Sizzle)
#main check on #mouseme (load Sizzle)
body check on #mouseme (load Sizzle)
Walk up tree.
#main check on #test (load Sizzle)
body check on #test (load Sizzle)
Walk up tree.
#main check on #main (load Sizzle)
body check on #test (load Sizzle)
Walk up tree.
body check on body (load Sizzle)
Return.
Loop through the results to trigger.
NOTE: Less walking up the tree, no running of duplicate selectors,
no sorting of element results === SPEED
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment