如何定位 $(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)，因为我的标记在显示不同产品的页面上重复出现。所以我只想针对我悬停的特定产品。

我是不是找错树了？

对不起，如果这是一个愚蠢的问题，我确切地知道我想做什么，但不能完全执行它！

Answer 1

你可以

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

演示：Fiddle

Answer 2

你可以使用find

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

Fiddle

JSPerf 全部三个选项。

顺便说一下，如果您有除 div 之外的其他元素作为目标元素的兄弟元素，并且您想显式选择第三个 div，请使用nth-of-type。在这种情况下，nth-child 将失败，因为它也会考虑任何其他类型的孩子，如果它出现在第 3 个之前，则第 3 个 div 不会被选中。

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

Answer 3

您也可以使用this

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

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