Comparing jQuery's .filter VS .not VS :not (v6)

Revision 6 of this benchmark created on

Description

Checking a filter that I'm about to write

Preparation HTML

<script src="//cdn.jsdelivr.net/jquery/1.7/jquery.min.js">
</script>
<table border="1">
  <tr data-uid='29adgds234qwd'>
    <th class="k-grid-edit1 k-button">Month</th>
    <th class="k-grid-edit k-button">Savings</th>
    <th class="k-grid-edit k-button k-grid-Desc">Savings for holiday!</th>
  </tr>
  <tr data-uid='2345asdseR532'>
    <td class="k-grid-edit k-button">January</td>
    <td class="k-grid-edit k-button k-state-disabled">$100</td>
    <td rowspan="2" class="k-grid-edita k-button k-state-disabled">$50</td>
  </tr>
  <tr data-uid='ASD124-AADadlka'>
    <td class="k-grid-edit k-button">February</td>
    <td>$80</td>
  </tr>
</table>

Setup

var $table = $('table');

Test runner

Ready to run.

Testing in
TestOps/sec
Using .filter
jQuery("tr[data-uid='2345asdseR532'] .k-button", $table)
       .filter(function (i) {
          var $this = jQuery(this);
          return !($this.hasClass('k-grid-edit') || $this.hasClass('k-grid-Desc'));
        })
        .addClass('k-state-disabled')
        .prop({ disabled: true, title: 'Readonly.' });
ready
Using .not
jQuery("tr[data-uid='2345asdseR532'] .k-button", $table)
        .not('.k-grid-edit, .k-grid-Desc')
        .addClass('k-state-disabled')
        .prop({ disabled: true, title: 'Readonly.' });
ready
Using :not
jQuery("tr[data-uid='2345asdseR532'] .k-button:not(.k-grid-edit, .k-grid-Desc)", $table)
        .addClass('k-state-disabled')
        .prop({ disabled: true, title: 'Readonly.' });
ready

Revisions

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