Class attribute vs Data attribute selectors (jQuery 1.6.4) (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<div id="a">
<div>
<div>
<div>
<div class="barBaz" data-bar="Baz">
</div>
<div class="foo barBaz" data-foo="blah" data-bar="Baz">
</div>
<div class="foo barBaz bip" data-foo="blah" data-bar="Baz" data-bip="blah">
</div>
<div class="foo bip bop" data-foo="blah" data-bip="blah" data-bop="blah">
</div>
<div>
</div>
</div>
</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Class attr
var prefix = 'bar';
var selector = '[class*="' + prefix + '"]';
$('#a').find(selector).each(function() {
  var barName = "";
  $(this.className.split(" ")).each(function() {
    if (this.substring(0, prefix.length) === prefix) {
      barName = this.substring(prefix.length);
    }
  });
});
ready
Data attr
var selector = '[data-bar]';
$('#a').find(selector).each(function() {
  var barName = $(this).data('bar');
});
ready
Class attr (no ID)
var prefix = 'bar';
var selector = '[class*="' + prefix + '"]';
$('div').find(selector).each(function() {
  var barName = "";
  $(this.className.split(" ")).each(function() {
    if (this.substring(0, prefix.length) === prefix) {
      barName = this.substring(prefix.length);
    }
  });
});
ready
Data attr (no ID)
var selector = '[data-bar]';
$('div').find(selector).each(function() {
  var barName = $(this).data('bar');
});
ready

Revisions

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