從復雜的html結構中使用JQuery獲取元素

Question

所以...點擊時，我希望帶有“ clicker ”類的按鈕通過JQuery獲得具有“ popup-box ”類的元素。 我下面的結構在頁面中多次出現，這是我的問題...我希望“點擊器”僅定位緊隨其后的“彈出框”。

我的結構如下（重復多次）：

<div class="item-papers">
    <div class="img-wrap">
        <div class="img-innerwrap">
            <a href="#" class="clicker"></a>
        </div>
    </div>

    <div class="floater">
        <span></span>
        <div class="item-papers-content">
            <span></span>
            <span></span>
            <div>
                <span></span>
                <div class="popup-box"></div>
            </div>
        </div>
    </div>
</div>

我已經把.sibblings（）、. parents（）、. find（）弄得一團糟，但我一生都無法弄清楚如何實現它。

任何幫助都非常感謝。 謝謝

Answer 1

好吧，它們最接近的公共父元素是.item-papers元素。

因此，使用.closest('.item-papers')從clicked元素向上移動，然后使用.find('.popup-box')向下.find('.popup-box')以獲得popup元素。

$('.clicker').on('click', function(e){
    e.preventDefault();
    var self = $(this),
        popup = self.closest('.item-papers').find('.popup-box');

    // do what you want with the popup element here..
});