CODEWITHSUNDEEP
javascriptjquery
Atasha
Atasha

Reputation: 499

How to target a child of a sibling div using jquery

I am trying to study JQuery and I am quite shucked on figuring our how to target a child with a specific class name of a sibling div.

Here is the fiddle that I have written: http://jsfiddle.net/7c9F4/2/

HTML:

<div id="container">
    <div class="item">
        <div class="item-image">
            <img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
        </div>
        <div class="item-name">
            Item 1
        </div>
        <div class="item-body">
            <div class="body-inner hidden">
                Body 1
            </div>
        </div>
    </div>
    <div class="item">
        <div class="item-image">
            <img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
        </div>
        <div class="item-name">
            Item 2
        </div>
        <div class="item-body">
            <div class="body-inner hidden">
                Body 2
            </div>
        </div>
    </div>
</div>

JQuery:

$('.item .item-image').bind({
    mouseenter: function() {
        $(this).siblings('.item-body').children('body-inner').show();
        console.log('Entered');
    },
    mouseleave: function() {
        $(this).siblings('.item-body').children('body-inner').hide();
        console.log('Left');
    }
});

I have tried to use the JQuery methods .next() and siblings() then try to get the child using the .children() method and it doesn't seem to work. :/

Upvotes: 0

Views: 1473

Answers (4)

Felix
Felix

Reputation: 38112

Your code works fine. You're just missing . to target class body-inner

$(this).siblings('.item-body').children('.body-inner').hide();
// ------------------------------------- ^ here

Also, you should use .on() instead of .bind(), final code look like:

$('.item .item-image').on({
    mouseenter: function() {
        $(this).siblings('.item-body').children('.body-inner').show();
        console.log('Entered');
    },
    mouseleave: function() {
        $(this).siblings('.item-body').children('.body-inner').hide();
        console.log('Left');
    }
});

Updated Fiddle

I just notice that the above demo is not working properly for your second image because you've added class hidden for the second .item-body, you should remove it to make it works properly.

If you cannot modify your HTML code, then you can use .eq() and .removeClass() to remove class hidden from your second .item-body:

$('.item-body:eq(1)').removeClass('hidden');

Updated Fiddle

Upvotes: 2

giri-jeedigunta
giri-jeedigunta

Reputation: 301

You can bind the mouse events on the outer div .item and use the .find() function in jQuery and navigate to the target element. Here is the js with .find()

$('.item').on({
    mouseenter: function () {
    $(this).find('.item-body .body-inner').show();
    },
    mouseleave: function () {
    $(this).find('.item-body .body-inner').hide();
    }
});

Here is the jsFiddle: http://jsfiddle.net/giri_jeedigunta/u45Ka/

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

Alternatively, you could use hover and toggle():

DEMO jsFiddle

$('.item .item-image').hover(function(){
    $(this).siblings('.item-body').children('.body-inner').toggle();       
});

PS: you should remove class hidden on second .item-body as in jsFiddle

Or using only CSS:

DEMO jsFiddle

.item-image:hover ~ .item-body > .body-inner {
    display: block;
}

Upvotes: 2

CodingIntrigue
CodingIntrigue

Reputation: 78595

body-inner needs to have a . to indicate a class selector:

$(this).siblings('.item-body').children('.body-inner').hide();

Additionally, as of jQuery 1.7 the .on method is preferred to .bind:

$('.item .item-image').on({
    mouseenter: function() {
        $(this).siblings('.item-body').children('.body-inner').show();
        console.log('Entered');
    },
    mouseleave: function() {
        $(this).siblings('.item-body').children('.body-inner').hide();
        console.log('Left');
    }
});

Updated Fiddle

Upvotes: 3

Related Questions