What is the best way to add class to parent div jQuery

Question

How do I add class to the parent div using jQuery, the following code works but is it good approach?

$("button > span:contains('Text')")
.parent()
.parent()
.parent()
.parent()
.parent()
.parent()
.addClass('test');

Answer 1

You could use .closest('parent_selector') instead if you want to get a top parent like :

$("button > span:contains('Text')").closest('top_parent_class_or_id').addClass('test');

$("button > span:contains('Text')").closest('.top-parent').addClass('test');

console.log($('.top-parent').prop('class'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="top-parent">
  <div>
    <div>
      <div>
        <button><span>Button Text</span></button>
      </div>
    </div>
  </div>
</div>

Answer 2

You could use closest to walk top parent div;

$("button > span:contains('Text')").closest('div')

Also you could use parentsUntil()

$("button > span:contains('Text')").parentsUntil('parentclassname_or_id')