selector vs find (v2)

Revision 2 of this benchmark created on

Preparation HTML

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="#">nav 1</a></li>
<li><a href="#">nav 2</a></li>
<li><a href="#">nav 3</a></li>
</ul>
</body>
</html>

Test runner

Ready to run.

Testing in
TestOps/sec
selector
$(document).ready(function() {
 $('#nav>li>a').css('background-color', 'orange');
});
ready
find
$(document).ready(function() {
 $('#nav').find('a').css('background-color', 'orange');
});
ready
children
$(document).ready(function() {
 $('#nav').children('li').children('a').css('background-color', 'orange');
});
ready
bad selector
$(document).ready(function() {
 $('#nav a').css('background-color', 'orange');
});
ready
another
$(document).ready(function() {
 $('ul#nav li a').css('background-color', 'orange');
});
ready
yet another
$(document).ready(function() {
 $('#nav li a').css('background-color', 'orange');
});
ready
and again
$(document).ready(function() {
 $('ul#nav>li>a').css('background-color', 'orange');
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.