How to get top level parent of div

Question

I would like to know how to get the top level parent of a div. I know you can use parent(), but I have a click function on multiple divs

<div class="parent" data-row="1">
  <div class="cat div1">
    <div class="sub-cat div1_1">content</div>
    <div class="sub-cat div1_2">content</div>
    <div class="sub-cat div1_3">
      <div class="inner-cat 1_3_3">innercontent</div>
    </div>
  </div>
  <div class="cat div2">
    <div class="sub-cat div2_1">content</div>
  </div>
</div>

Let's say I have a parent div, with a parent class name, which also includes an index number in data-row.

I have click functions on the .sub-cat, .inner-cat and .cat, however, I want to get the data-row function with every click.

I've tried retrieving the data-row by using $(this).closest('.parent') to get to the parent div, but that doesn't work as in it returns length 0.

Answer 1

To achieve this you can use closest(). parents() is an alternative, but closest() performs better as it stops at the first match.

$('.cat, .innercat, .sub-cat').click(function(e) {
  e.stopPropagation();
  var row = $(this).closest('.parent').data('row');
  console.log(row);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-row="1">
  <div class="cat div1">
    <div class="sub-cat div1_1">content</div>
    <div class="sub-cat div1_2">content</div>
    <div class="sub-cat div1_3">
      <div class="inner-cat 1_3_3">innercontent</div>
    </div>
  </div>
  <div class="cat div2">
    <div class="sub-cat div2_1">content</div>
  </div>
</div>

Also note the use of stopPropagation() in the event handler to stop the event bubbling up and being caught by nested elements.

Answer 2

You want parents(".parent") which will walk all the way up the parent tree

$('.cat, .sub-cat, .inner-cat').on("click", function(){
    var $parent = $(this).parents(".parent");
    console.log($parent.data("row"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" data-row="1">
  <div class="cat div1">
      <div class="sub-cat div1_1">content</div>
      <div class="sub-cat div1_2">content</div>
      <div class="sub-cat div1_3">
          <div class="inner-cat 1_3_3">innercontent</div>
      </div>
  </div>
  <div class="cat div2">
     <div class="sub-cat div2_1">content</div>
  </div>
</div>