CODEWITHSUNDEEP
jqueryhtmlhover
user195257
user195257

Reputation: 3316

Finding a class belonging to parent in jQuery

Trying to move some divs using hover, this is my markup:

<div class="item dark-grey">
    <div class="img">
        <img src="images/case-study-develop.jpg" width="174" height="59" alt="Case Study">
    </div>
    <div class="triangle-container">
        <div class="triangle-border-light-blue"></div>
        <div class="triangle-dark-grey"></div>
    </div>
    <div class="content light-blue">
        <h2><a href="#">Developing community work with the voluntary sector</a></h2>
    </div>
</div>

This is what I am using at the moment, which works fine but I only want the hover on the content div, not the whole item div.

$(document).ready(function() {
            $('.item').hover(function(e){
                    $('.img', this).animate({height: "30px"},100);
            },function(e){
                    $('.img', this).animate({height: "58px"},100);
            });
    });

I thought if I hover over .item .content and then get the parent, and find .img belonging to the parent it would work, but am not sure if I am doing it right.

$('.item .content').hover(function(e){
                $(this).parents('.img').animate({height: "30px"},100);
}

Upvotes: 1

Views: 158

Answers (4)

MakuraYami
MakuraYami

Reputation: 3428

$(this).parent().find('.img')

should work

Upvotes: 1

jfriend00
jfriend00

Reputation: 708046

It sounds like you want this:

$('.item .content').hover(function(e) {
    $(this).closest('.item').find('.img').animate({height: "30px"}, 100);
}, function(e) {
    $(this).closest('.item').find('.img').animate({height: "58px"}, 100);
});

This will watch for hover on the .content object and when the hover event happens, it will find the .item container and then find the .img object in that container and animate it.

One of the keys here is .closest() which finds the first ancestor that matches a given selector which is really useful for finding a specific container div.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

What you have won't work because .img isn't a parent of .content, it's a sibling.

You can check the siblings() of .content():

$('.item .content').hover(
    function(e){
        $(this).siblings('.img').animate({ height: "30px" }, 100);
    },
    //function...
});

Or you can traverse up the DOM to the parent of .content and then find('.img'):

$('.item .content').hover(
    function(e){
        $(this).parent().find('.img').animate({ height: "30px" }, 100);
    },
    //function...
});

Or if you can guarantee that the structrue of these divs will never change, you can use prev():

$('.item .content').hover(
    function(e){
        $(this).prev().prev().animate({ height: "30px" }, 100);
    },
    //function...
});

Upvotes: 2

Matt
Matt

Reputation: 75327

The <img /> isn't a parent of the .item .content element, so you can't use that.

You can navigate to the .item element using closest() and then get the .img element from there;

$(this).closest('.item').children('img').animate({height: "30px"},100);

Although, as the .img element is a sibling of the .item .content element you could do;

$(this).siblings('.img').animate({height: "30px"},100);

For more info, see the siblings() and closest() documentation.

Upvotes: 1

Related Questions