jQuery : Get first closest "parent" by type?

Question

I need to get the id of the first closest (nearest) li parent element when i click on a element.

<ul>
    <li id="wrong1">
        <ul>
          <li id="p1">
            <a href="" class='btn'></a>
          </li>
          <li id="p2">
            <a href="" class='btn'>Click here!</a>
          </li>
          <li id="p3">
            <a href="" class='btn'></a>
          </li>
        </ul>
    </li>
    <li id="wrong2"></li>
</ul>

When i clicked on Click here!, i'm supposed to get li#p2 element.

I used:

$('a.btn').click(function(e) {
    var GotIt = $(this).parents().find('li').attr('id');
});

But apparently it didn't work. I also tried closest() and also the same outcome.

How to get the element properly please?

Halfslip

Did you try closest("li") ? – Carmody

Possible duplicate of Difference between jQuery parent(), parents() and closest() functions – Carmody

Answer 1

You should write your script as

$('a.btn').click(function(e) {
    var GotIt = $(this).closest('li').attr('id');
});

because "li" is the direct parent of your "a" element, so u can also use like

$('a.btn').click(function(e) {
    var GotIt = $(this).parent().attr('id');
});

Upwards

Answer 2

Attention!

Although the given answers work in this (your) case, they are wrong - regarding the question:

"the closest parent with [what ever]"

Correct is

$element.parent().closest([what ever])

closest() includes the element itself and as long it is not [what ever], too, the script works fine, but …

This is a slumbering error in many scripts, that shows up after DOM - design changes later in development.

The docs say for closest():

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

(bold from me)

Rosabelle

Answer 3

You can use closest(type), ie:

$('a.btn').click(function(e) {
    var li = $(this).closest("li");
    alert(li.attr("id"))
});

Fiddle: https://jsfiddle.net/f14vjLmc/

Carmody

Answer 4

try this closest() JQuery Method

Excited