如何定位$（this）的nth-child

Question

我正在尝试在悬停时定位元素的第n个子项。

我的HTML就是这个......

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

目前.child3为display:none，但在.parent悬停时，我想对所有内容应用不透明度，并显示.child3没有不透明度。< / p>

到目前为止我已经

了

$(".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之外的其他元素作为目标元素的兄弟，并且你想明确选择第3个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();
});