jQuery nested $(".class") selectors

JavaScript performance comparison

Test case created by Scott Kosman

Info

Testing whether selecting multiple class names is faster by various methods

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul class="foo">
<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

<li class="bar">yay!</li>

<li>yay!</li>

<li>yay!</li>

<li>yay!</li>

</ul>

Preparation code output

  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!
  • yay!

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
.find()
$(".foo").find(".bar")
pending…
context
$(".bar",".foo")
pending…
multiple classes in one $
$(".foo .bar")
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment