CODEWITHSUNDEEP
jqueryperformance
RobiZzT
RobiZzT

Reputation: 251

Get specific parent of an element

I'm using this code to get overlay on hover on all elements in one ".grid", except one that is hovered:

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; 
    }
});

So, my question is: What is proper way to get specific parent?

I found two ways to do it:

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

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

And, when I use var galleryGrid in first example, console.log prints out as same as if I wrote just parents(). Why is that?

This is html code:

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

Upvotes: 0

Views: 1100

Answers (1)

SilverSurfer
SilverSurfer

Reputation: 4366

If it isnt a direct parent I would use closest() to travels up the DOM tree and return the first (single) ancestor that matches the passed expression:

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

Upvotes: 1

Related Questions