jquery - $(this) の n 番目の子をターゲットにする方法

Question

ホバー時に要素の n 番目の子をターゲットにしようとしています。

私のhtmlはこれです....

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

現時点で.child3はですdisplay:noneが、にホバーすると.parent、すべてに不透明度を適用し、不透明度なしで表示したいと考えています.child3。

これまでのところ、

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

$(this)さまざまな製品を表示するページでマークアップが繰り返されるため、使用する必要があります。そのため、私がホバリングしている特定の製品だけをターゲットにしたいと考えています。

私は間違った木を吠えていますか？

ばかげた質問で申し訳ありませんが、やりたいことは正確にわかっていますが、それを実行することはできません!

score 2 · Accepted Answer

使用できますfind

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

ちなみに、対象要素の兄弟に div 以外の要素があり、3 番目の div を明示的に選択したい場合は、を使用しますnth-of-type。この場合、nth-child は他のタイプの子も考慮するため失敗し、3 番目の div の前に表示される場合、3 番目の div は選択されません。

$(this).find('> div:nth-of-type(3)').show();

score 1 · Accepted Answer

こんな使い方もできます

$(".parent").hover(function() {

    $('> div:nth-child(3)', this).toggle();
});

3 に答える 3