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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 24, 2018 at 12:56 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Aug 24, 2018 at 11:12 Elvira Elvira 1,44055 gold badges2727 silver badges5454 bronze badges 1

• can you share your jquery code? – Rohit Verma Commented Aug 24, 2018 at 11:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./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.

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./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>