从复杂的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..
});