無法使用 jQuery 獲取遠程父 div 中的元素

Question

在具有許多塊的 dom 中，如下所示，我想在單擊link時獲取pid元素的名稱（id 123 ）：

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

這是我的 jQuery：

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

但我得到的pid is: undefined

我怎樣才能解決這個問題？

Answer 1

您必須使用.closest()而不是.parent() ，因為.parent()只會上升.parent() 。 .closest()將繼續直到它到達頂部或找到元素。

 $(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>