Becs Carter Becs Carter - 3 months ago 7
jQuery Question

How to target the nth-child of $(this)

I am trying to target the nth child of an element on hover.

My html is this....

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>


At the moment,
.child3
is
display:none
, but on hover of
.parent
, I want to apply opacity to everything, and display
.child3
with no opacity over.

So far I have

$(".parent").hover(function() {
$(this:nth-child(3)).show();
});


I need to use
$(this)
as my markup is repeated on my page displaying different products. So I want to target just the particular product that I am hovering over.

Am I barking up the wrong tree?

Sorry if this is a dumb question, I know exactly what I want to do, but just can't quite execute it!

Answer

You can

$(this).children(':nth-child(3)').show();

Demo: Fiddle