Question

我正在使用此代码将鼠标悬停在一个“.grid”中的所有元素上，除了悬停的一个元素：

var galleryGrid = $('.grid'),
    galleryImg = $('a.img-to-bg'),
    galleryImgOverlay = $('.overlay-wrapper');
// Overlay on hover gallery
galleryImg.on({
    mouseenter: function(){
        $(this).find(galleryImgOverlay).addClass('hovered');
        //$(this).parentsUntil(galleryGrid).parent().find(galleryImgOverlay).not('.hovered').css({
        $(this).parents('.grid').find(galleryImgOverlay).not('.hovered').css({
            'background': 'rgba(0, 0, 0, 0.5)'
        });
        return false; 
    },
    mouseleave: function(){
        $(this).find(galleryImgOverlay).removeClass('hovered');
        //$(this).parentsUntil(galleryGrid).parent().find(galleryImgOverlay).css({
        $(this).parents('.grid').find(galleryImgOverlay).css({
            'background': 'rgba(0, 0, 0, 0)'
        });
        return false; 
    }
});

所以，我的问题是：获得特定父母的正确方法是什么？

我找到了两种方法：

$(this).parents('.grid').find(galleryImgOverlay).css({

$(this).parentsUntil(galleryGrid).parent().find(galleryImgOverlay).css({

而且，当我在第一个例子中使用var galleryGrid时，console.log打印出来就像我只写了parent（）一样。那是为什么？

这是html代码：

<!-- Section Content -->
<div class="container margintop80">

    <!-- List of Galleries -->
    <ul class="grid">

        <!-- Gallery A -->
        <li class="toAnimateToo">

            <a href="..." class="img-to-bg">
                <div class="overlay-wrapper">
                    <div class="overlay-inner">
                        <div class="center">
                            <div class="btn btn-full-full"></div>
                        </div>
                    </div>
                </div>
            </a>

        </li>
    </ul>
</div>

Answer 1

如果它不是直接父级，我会使用closest()向前移动DOM树并返回与传递的表达式匹配的第一个（单个）祖先：

$(this).closest('.grid').find(galleryImgOverlay).css({

获取元素

1 个答案: