jQuery Selectors (v86)

Revision 86 of this benchmark created on

Description

The different ways to select (context, pure selector, +find()) DOM elements using jQuery

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>
  <ul id="list">
    <li class="first">aaaa
    </li>
    <li class="last">
    </li>
  </ul>
</div>
<div class="first">
</div>
<script>
  var list = document.getElementById('list');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
context
var $first = $('.first', list).text();
console.log("test 1" + $first);
ready
selector
var $first = $('#list .first').text();
console.log("test 2" + $first);
ready
context and find()
var $first = $(list).find('.first').text();
console.log("test 3" + $first);
ready
created context
var $first = $('.first', $('#list')).text();
console.log("test 4" + $first);
ready
selector and find
var $first = $('#list').find('.first').text();
console.log("test 5" + $first);
ready
children
var $first = $('#list').children('.first').text();
console.log("test 6" + $first);
ready
children 2
var $first = $(list).children('.first').text();
console.log("test 7" + $first);
ready
child
var $first = $("#list>.first").text();
console.log("test 8" + $first);
ready

Revisions

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