Getting a class name from class list

JavaScript performance comparison

Test case created by Josh

Info

I wanted to find the quickest way to get a class name from an element so I could dynamically create a data-attr from the matched class name.

Preparation code

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

<ul class="category-tree">

        <li class="category list-item depth-1">list item</li>
        <li class="category list-item depth-1">list item</li>
        <li class="category list-item depth-1">list item</li>
        <li class="category list-item depth-1">list item</li>
        <li class="category list-item depth-1">list item</li>
       
        <li class="category list-item depth-2">list item</li>
        <li class="category list-item depth-2">list item</li>
        <li class="category list-item depth-2">list item</li>
        <li class="category list-item depth-2">list item</li>
        <li class="category list-item depth-2">list item</li>
       
        <li class="category list-item depth-3">list item</li>
        <li class="category list-item depth-3">list item</li>
        <li class="category list-item depth-3">list item</li>
        <li class="category list-item depth-3">list item</li>
        <li class="category list-item depth-3">list item</li>

        <li class="category list-item depth-4">list item</li>
        <li class="category list-item depth-4">list item</li>
        <li class="category list-item depth-4">list item</li>
        <li class="category list-item depth-4">list item</li>
        <li class="category list-item depth-4">list item</li>

        <li class="category list-item depth-5">list item</li>
        <li class="category list-item depth-5">list item</li>
        <li class="category list-item depth-5">list item</li>
        <li class="category list-item depth-5">list item</li>
        <li class="category list-item depth-5">list item</li>

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

Preparation code output

  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery Each
depths.each(function(indx) {

  var depth;

  // Get all class names from list item
  var classNames = this.className.split(" ");

  // iterate over all classes  
  $.each(classNames, function(index, match) {

    // Find class that starts with depth-
    if (match.indexOf("depth-") === 0) {

      // Set the depth
      depth = match;

    }

  });

  // Create data-attr from matched class
  $(this).attr('data-matched-class', depth);

});
pending…
jQuery Grep
depths.each(function(indx) {

  // Loop through all classes assigned to list item
  var depth = $.grep(this.className.split(" "), function(match, i) {

    // Return the 'depth-' class from the list item
    return match.indexOf('depth') === 0;

  });

  // Create data-attr from matched class
  $(this).attr('data-matched-class', depth);

});
pending…
Regex Match
depths.each(function(indx) {

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

  // Create data-attr from matched class
  $(this).attr('data-matched-class', 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