[jquery] JQuery find first parent element with specific class prefix

I want to get the first parent which has a specific class prefix, suppose:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

For example, my current element is #divid and I want to find the first element that has the class prefix div-a. So basically it will select:

<div class="div-a89892">

This question is related to jquery jquery-selectors

The answer is


Use .closest() with a selector:

var $div = $('#divid').closest('div[class^="div-a"]');

Jquery later allowed you to to find the parents with the .parents() method.

Hence I recommend using:

var $div = $('#divid').parents('div[class^="div-a"]');

This gives all parent nodes matching the selector. To get the first parent matching the selector use:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

For other such DOM traversal queries, check out the documentation on traversing the DOM.