如何通過非直接類獲取父元素的 ID 值？ jQuery

Question

我知道如何獲取直接父類的值，id..等。但是你如何獲取不是直接的父類的 ID 值，不是最祖父類，而是已知類名的 ID 值？ 我知道您會認為只是根據類名獲取 ID 值。 但是我有很多動態加載的內容，具有相同的類。 所以我必須有作為這個元素的父類的類。 謝謝！

<div class="A">
    <div class="B" id="1">
        <div class="C">
            <div class="D">
                <input class="need-ID-of-class-B" value="">
            </div>
        </div>
    </div>
</div>

Answer 1

您可以嘗試使用.parents()或.closest() ：

 console.log($('.need-ID-of-class-2').closest('.2').attr('id'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="1"> <div class="2" id="1"> <div class="3"> <div class="4"> <input class="need-ID-of-class-2" value=""> </div> </div> </div> </div>

Answer 2

使用.closest([class="2"])您可以獲得匹配.2的祖先，並獲取其 ID：

 const input = document.querySelector('input'); console.log(input.closest('[class="2"]').id);

 <div class="1"> <div class="2" id="1"> <div class="3"> <div class="4"> <input class="need-ID-of-class-2" value=""> </div> </div> </div> </div>

如果可能，請修復您的 HTML 以使其類有效 - 類名不應以數字開頭。 然后你可以使用. 而不是[class] ：

 const input = document.querySelector('input'); console.log(input.closest('.two').id);

 <div class="1"> <div class="two" id="1"> <div class="3"> <div class="4"> <input class="need-ID-of-class-2" value=""> </div> </div> </div> </div>

Answer 3

訪問最近祖先元素的不同方法是，最近的() ，父母() ， querySelector 和最近的() 。

$('.need-ID-of-class-B').closest('.B').attr('id');

$('.need-ID-of-class-B').parents('.B').attr('id');

document.querySelector('.need-ID-of-class-B').closest("div .B").getAttribute('id');