Find the parents parent element using jquery

Question

I have the HTML as follows. what i need is when someone clicks on the span element i want to find its parents parent element check some conditions. i used prev() method but it gives me only the near parent(parent2 here)

<div class="container">
    <div class="contain">
        <div id="parent1">
            <div class="parent2">
                <span> Click here</span>
            </div>
        </div>
    </div>
</div>

var currentComponent = $(event.target).prev(); //here i get parent2

How can i find the parents parent element(in this case parent2). i am not very familiar with jquery so any help would be appreciated.

Read about .parents() and .parentsUntil(). In your case, what is the expected parent element? — JGV, Jan 20 '17 at 05:16
Try this : $(event.target).parents('#parent1') or $(event.target).parent().parent() — Mukesh Ram, Jan 20 '17 at 05:19
Possible duplicate to http://stackoverflow.com/questions/2369913/jquery-selecting-grandparents — mc20, Jan 20 '17 at 05:19
If elements are modifying their ancestors, descendants, or siblings, your app will turn into spaghetti real quick. read up on one day dataflow and idempotent view functions — OregonTrail, Jan 20 '17 at 05:52

mrlew · Answer 1 · 2017-01-20T05:24:58.673

You can try .closest.

From the docs:

the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. (...) get the first element that matches the selector by testing the element itself and .

It traverses up through the element ancestors in the DOM and returns the first one that matches the selector you passed as an argument. So, in your example, you can do something like that:

$("span").on("click", function(e) {
  var myParent = $(this).closest(".parent2");
  var parentOfMyParent = $(this).closest(".parent1");
  var contain = $(this).closest(".contain");
  var containerAbove = $(this).closest(".container");
});

Anomitra · Answer 2 · 2017-01-20T05:50:50.990

1

What you need is

var currentComponent = $(event.target).parent().parent()

To do it in a single call, you can use

var currentComponent = $(event.target).closest(".parent1")

edited Jan 20 '17 at 05:50

answered Jan 20 '17 at 05:19

Anomitra

1,111
15
31

score 1 · Answer 3 · edited Jan 20 '17 at 06:04

Fiddle:

https://jsfiddle.net/c624re4o/

Code:

var grandParent = $(this).parent().parent();

Full Working Code

$(document).ready(function () {
  $("span").click(function () {
    var grandParent = $(this).parent().parent();
    alert(grandParent.attr('id')); // Just for Testing
  });
});

$(document).ready(function () {
  $("span").click(function () {
    var grandParent = $(this).parent().parent();
    alert(grandParent.attr('id')); // Just for Testing
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="contain">
        <div id="parent1">
            <div class="parent2">
                <span> Click here</span>
            </div>
        </div>
    </div>
</div>

Alam Zaib · Answer 4 · 2018-05-15T08:21:56.790

1

you can use .closest() or .parents() function with selector like .parents('#elementid')

edited May 15 '18 at 08:21

answered May 15 '18 at 07:40

Alam Zaib

187
1
11

Find the parents parent element using jquery

4 Answers4