Cannot get element inside distant parent div using jQuery

Question

In a dom which has many of the blocks like the one below, I'd like to get name of pid element (i.d 123) when link is clicked:

<div class="a-post">
    <a class="pid" name="123"></a>
    <div class="row">
        <p>Some text</p>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-12">
            <p>Othe text </p>
        </div>

        <br>
        <div class="row">
            <div class="col-xs-1">
                <img class="link" src="link.svg">
            </div>

        </div>

    </div>
</div>

Here is my jQuery:

$(document).ready(function () {
  $(".link").click(function () {
    let pid = $(this).parent(".a-post").find(".pid").attr('name');
    console.log('pid is:', pid);
 }
});

But I get pid is: undefined

How can I fix this?

Just a note: the name attribute for anchors is obsolete and shouldn't be used — Pete, Aug 21 '19 at 12:35
use an id or a data attribute? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a — Pete, Aug 21 '19 at 12:40

score 3 · Accepted Answer · answered Aug 21 '19 at 12:32

You have to use .closest() and not .parent(), because .parent() only goes 1 step up. .closest() will continue until it reach the top or finds the element.

$(document).ready(function() {
  $(".link").click(function() {
    let pid = $(this).closest(".a-post").find(".pid").attr('name');
    console.log('pid is:', pid);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a-post">
  <a class="pid" name="123"></a>
  <div class="row">
    <p>Some text</p>
  </div>
  <br>
  <div class="row">
    <div class="col-xs-12">
      <p>Othe text </p>
    </div>

    <br>
    <div class="row">
      <div class="col-xs-1">
        <img class="link" src="link.svg">
      </div>

    </div>

  </div>
</div>

Cannot get element inside distant parent div using jQuery

1 Answers1