Jquery $(this) Child Selector Not working for some unknown reason

Question

I am trying to show/hide the child class when parent is hovered. I have multiple class set like in Jquery $(this) Child Selector.

for some unknown reason it is not working.

What I have is

<div class="parentitem">
    <div class="childitem">
    </div>
</div>

Also

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $("div.childitem").css({visibility: "visible"});
});

$("div.parentitem").mouseleave(function(){
    $("div.childitem").css({visibility: "hidden"});
});

This works but all the children are affected. What I wanted is to affect only particular div and its child

I tried to use

$(this).children("div.childitem").css({visibility: "visible"});

$(this).parent().children("div.childitem").css({visibility: "visible"});

$(this).next("div.childitem").css({visibility: "visible"});

None of this is working for some reason.

Can somebody point me where I went wrong.

Thanks

Deepak

what is `$(this)`, the div with id `parentitem`? – JamesHalsall Sep 16 '11 at 12:51 — JamesHalsall, Sep 16 '11 at 12:51

score 5 · Accepted Answer · answered Sep 16 '11 at 12:52

5

Try:

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $(this).find('.childitem').css({visibility: 'visible'});
});

$("div.parentitem").mouseleave(function(){
    $(this).find('.childitem').css({visibility: 'hidden'});
});

JS Fiddle demo.

answered Sep 16 '11 at 12:52

David Thomas

249,100
51
377
410

Thats what I was going to suggest :) – Alistair Laing Sep 16 '11 at 12:53
1

It works for me, on the JS Fiddle demo that I posted. Do you have something else going on in your page? Have you checked your JavaScript console for any errors? – David Thomas Sep 16 '11 at 13:07
I have seen demo and it is working but in my page it's not. Javascript console doesn't also show any error. Thanks... I have to check it little bit deeper. – Deepak Shrestha Sep 16 '11 at 13:20

robert · Answer 2 · 2011-09-16T13:12:26.763

2

Try $(this).find("div.childitem") instead of $(this).children("div.childitem").

children() finds the immediate children only, while find() searches among all children, i.e. the children's children and their children and so on.

If that still doesn't work, I suggest to anaylze the order in which all related event handlers are called. Might be that the result of the mouseenter event handlers is instantly undone by some other event handler.

In Chrome or with Firebug in Firefox you can log to the console. E.g. for Chrome it's console.log(text_or_object).

edited Sep 16 '11 at 13:12

answered Sep 16 '11 at 12:53

robert

3,484
3
29
38

Try to debug your event handlers, i.e. try to understand in which order they're called and what they're *actually* doing to the page. – robert Sep 16 '11 at 13:13

score 0 · Answer 3 · answered May 16 '12 at 11:13

0

This might be interesting: http://jsfiddle.net/DrkwB/2/

I just modified an existing example to accommodate multiple content areas and then the particular parent that is hovered on, its child element is hidden or shown accordingly.

answered May 16 '12 at 11:13

Peter

6,509
4
30
34

score 0 · Answer 4 · answered Sep 16 '11 at 12:52

0

I think this is what you'll need:

$("div.parentitem").mouseenter(function(){
    $(this).find("div.childitem").css({visibility: "visible"});
});

answered Sep 16 '11 at 12:52

Blazemonger

90,923
26
142
180

score 0 · Answer 5 · answered Sep 16 '11 at 12:52

0

You need to use $(this) as the selector context ie

$("div.childitem",$(this))

Though there is probably a more elegant solution...

answered Sep 16 '11 at 12:52

El Ronnoco

11,753
5
38
65

Jquery $(this) Child Selector Not working for some unknown reason

5 Answers5