Check if an element has a parent with a certain class (v5)

Revision 5 of this benchmark created on

Description

To test the performance of these operations

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="parent1">
  <div class="parent2">
  </div>
  <div class="parent2">
    <div class="parent3" id="parent3">
      <div class="parent4">
      </div>
      <div class="parent4">
        <div class="parent5">
          <div class="parent6">
            <div class="parent7">
            </div>
            <div class="parent7">
              <div class="parent8">
                <div class="parent9">
                  <div class="parent10">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="parent3">
      </div>
    </div>
  </div>
</div>
<script>
  var p9 = jQuery('.parent9');
  var parents = jQuery('.parent9').parents();
</script>

Setup

function getFirstParentWithClassName(elem, className) {
      var cur = elem.parentNode;
      while (cur) {
        if (cur.classList && cur.classList.contains(className)) {
          return cur;
        }
        cur = cur.parentNode;
      }
      return null;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
parents and hasClass
p9.parents().hasClass('parent3')
ready
closest
p9.closest('.parent3')
ready
parents
p9.parents('.parent3')
ready
is
p9.parents().is('.parent3')
ready
filter
p9.parents().filter('.parent3')
ready
filter (cached)
parents.filter('.parent3')
ready
closest (with id)
p9.closest('#parent3')
ready
closest (with class)
p9.closest('.parent3')
ready
no external libraries
getFirstParentWithClassName(p9, 'parent3')
ready

Revisions

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