Each vs data-selector

JavaScript performance comparison

Test case created by Nicklas

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="test">
<div data-group="foo">Foo 1</div>
<div data-group="foo">Foo 2</div>
<div data-group="foo">Foo 3</div>
<div data-group="foo">Foo 4</div>
<div data-group="bar">Bar 1</div>
<div data-group="bar">Bar 2</div>
<div data-group="bar">Bar 3</div>
<div data-group="bar">Bar 4</div>
<div data-group="foo">Foo 5</div>
<div data-group="foo">Foo 6</div>
<div data-group="foo">Foo 7</div>
<div data-group="foo">Foo 8</div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  $.fn.getGroupByAttribute = function (group) {
      var $children = $('[data-group="' + group + '"]', this);
  
      // Return first child or empty jQuery
      return $children.length ? $children[0] : $();
  }
  
  $.fn.getGroupByEach = function (group) {
    var $result = $();
    $(this).each(function() {
      if($(this).data("group") == group) {
        result = $(this);
        return false;
      }
    });
    return $result;
  }
  
  var get_group = function ($from, group) {
    var $result = $();
    $from.each(function() {
      if($(this).data("group") == group) {
        result = $(this);
        return false;
      }
    });
    return $result;
  }
  
  var get_group_for = function ($from, group) {
      for (var i = 0; i < $from.length; i++) {
          if ($($from[i]).data("group") == group) {
              return $from[i];
          }
      }
  }
  
  var get_group_for_alt = function ($from, group) {
      for (var i = 0; i < $from.length; i++) {
          if ($($from[i]).data("group") == group) {
              return $($from[i]);
          }
      }
  }
  
  var get_group_while = function ($from, group) {
      var n = 0;
      while (n < $from.length) {
          if ($($from[n]).data('group') == group) {
              return $($from[n]);
          }
          n++;
      }
      return $();
  }

};
</script>

Preparation code output

<div id="test"> <div data-group="foo">Foo 1</div> <div data-group="foo">Foo 2</div> <div data-group="foo">Foo 3</div> <div data-group="foo">Foo 4</div> <div data-group="bar">Bar 1</div> <div data-group="bar">Bar 2</div> <div data-group="bar">Bar 3</div> <div data-group="bar">Bar 4</div> <div data-group="foo">Foo 5</div> <div data-group="foo">Foo 6</div> <div data-group="foo">Foo 7</div> <div data-group="foo">Foo 8</div> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
data-attribute
$('#test').getGroupByAttribute('bar');
pending…
each, $.fn.extend
$('#test').getGroupByEach('bar');
pending…
each, separate function
get_group($('#test'), 'bar');
pending…
data-attribute:first
$('#test').find('[data-attribute="bar"]:first');
pending…
data-attribute, eq(0)
$('#test').find('[data-attribute="bar"]').eq(0);
pending…
for loop
get_group_for($('#test'), 'bar');
pending…
for loop, returns jQuery
get_group_for_alt($('#test'), 'bar');
pending…
while loop
get_group_while($('#test'), '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.

0 Comments

Foo 1
Foo 2
Foo 3
Foo 4
Bar 1
Bar 2
Bar 3
Bar 4
Foo 5
Foo 6
Foo 7
Foo 8