Info

Comparing the performance of finding the next sibling matching a given selector using nextAll with the :first pseudo-class vs. a naive next loop vs. a loop using a very, very slightly optimized version via nextSibling.

Preparation code

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

<script>
  (function($) {
   // Implementation for "naive next loop" function
   $.fn.nextMatchNaive = nextMatchNaive;
  
   function nextMatchNaive(selector) {
    var match;
  
    match = this.next();
    while (match.length > 0 && !match.is(selector)) {
     match = match.next();
    }
    return match;
   }
  
   // Implementation for "$(nextSibling) loop"
   // Really not much better than the naive one
   $.fn.nextMatchViaRaw = nextMatchViaRaw;
  
   function nextMatchViaRaw(selector) {
    var raw, match;
  
    raw = this[0];
    if (!raw || !raw.nextSibling) {
     return $();
    }
    raw = raw.nextSibling;
    while (raw && !(match = $(raw)).is(selector)) {
     raw = raw.nextSibling;
    }
    return raw ? match : $();
   }
  
   // Prep the 10,000 divs
   var counter, div;
   for (counter = 1; counter <= 10000; ++counter) {
    div = document.createElement('div');
    if (counter === 5000 || counter === 10000) {
     div.innerHTML = "This is #" + counter + " and has foo!";
     div.className = "foo";
    }
    else {
     div.innerHTML = "This is #" + counter;
    }
    document.body.appendChild(div);
    if (!window.firstDiv) {
     window.firstDiv = $(div);
    }
   }
  
  })(jQuery);
</script>

Preparation code output

Test runner

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

Java applet disabled.

var foo = window.firstDiv.nextAll("div.foo:first");
if (foo.length !== 1 || foo[0].className !== "foo") {
 throw "Assertion failure: Didn't find div.foo";
}

var foo = window.firstDiv.nextMatchNaive("div.foo");
if (foo.length !== 1 || foo[0].className !== "foo") {
 throw "Assertion failure: Didn't find div.foo";
}

var foo = window.firstDiv.nextMatchViaRaw("div.foo");
if (foo.length !== 1 || foo[0].className !== "foo") {
 throw "Assertion failure: Didn't find div.foo";
}

var foo = window.firstDiv.nextAll("div.foo").first();
if (foo.length !== 1 || foo[0].className !== "foo") {
 throw "Assertion failure: Didn't find div.foo";
}

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:

• Revision 1: published by T.J. Crowder on 8th February 2011
• Revision 2: published on 8th February 2011

1 comment