Assign attribute to direct child

JavaScript performance comparison

Test case created by Josh

Preparation code

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

<ul class="category-tree">

        <li class="category list-item item depth-1">
                <a href="/">list link</a>
                <ul class="sub-categories">
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                </ul>  
        </li>
       
        <li class="category list-item item depth-1">
                <a href="/">list link</a>
                <ul class="sub-categories">
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                </ul>  
        </li>
       
        <li class="category list-item item depth-1">
                <a href="/">list link</a>
                <ul class="sub-categories">
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                </ul>  
        </li>
       
        <li class="category list-item item depth-1">
                <a href="/">list link</a>
                <ul class="sub-categories">
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                </ul>  
        </li>
       
        <li class="category list-item item depth-1">
                <a href="/">list link</a>
                <ul class="sub-categories">
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                </ul>  
        </li>
       
        <li class="category list-item item depth-1">
                <a href="/">list link</a>
                <ul class="sub-categories">
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                        <li class="category list-item item depth-2">
                                <a href="/">list link</a>
                                <ul class="sub-categories">
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                        <li class="category list-item item depth-3"><a href="/">list item</a></li>
                                </ul>
                        </li>
                </ul>  
        </li>

</ul>
<script>
Benchmark.prototype.setup = function() {
    var categories = $('.category-tree').find('li');
};
</script>

Preparation code output

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 CSS Child Selector
categories.each(function() {

  // Get the depth from 'depth-x' class
  var depth = this.className.match(/depth[\w-]*\b/);

  // Get the immediate child a element
  var immChild = $(this).find('a');

  // Create data-attr on immediate a element
  immChild.attr('data-depth', depth);

});
pending…
Find CSS Direct Child Selector
categories.each(function() {

  // Get the depth from 'depth-x' class
  var depth = this.className.match(/depth[\w-]*\b/);

  // Get the immediate child a element
  var immChild = $(this).find('> a');

  // Create data-attr on immediate a element
  immChild.attr('data-depth', depth);

});
pending…
Find CSS First Child Selector
categories.each(function() {

  // Get the depth from 'depth-x' class
  var depth = this.className.match(/depth[\w-]*\b/);

  // Get the immediate child a element
  var immChild = $(this).find('a:first');

  // Create data-attr on immediate a element
  immChild.attr('data-depth', depth);

});
pending…
jQuery Children Method
categories.each(function() {

  // Get the depth from 'depth-x' class
  var depth = this.className.match(/depth[\w-]*\b/);

  // Get the immediate child a element
  var immChild = $(this).children('a');

  // Create data-attr on immediate a element
  immChild.attr('data-depth', depth);

});
pending…
jQuery CSS Select 'this' Direct Child
categories.each(function() {

  // Get the depth from 'depth-x' class
  var depth = this.className.match(/depth[\w-]*\b/);

  // Get the immediate child a element
  var immChild = $('> a', this);

  // Create data-attr on immediate a element
  immChild.attr('data-depth', depth);

});
pending…

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

Compare results of other browsers

0 comments

Add a comment