-1

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

我的html是这个....

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

目前,.child3display:none,但在悬停时.parent,我想对所有内容应用不透明度,并显示.child3没有不透明度。

到目前为止我有

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

我需要使用$(this),因为我的标记在我的页面上重复显示不同的产品。所以我只想针对我悬停的特定产品。

我在吠叫错误的树吗?

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

4

3 回答 3

4

你可以

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

演示:小提琴

于 2013-07-03T03:47:59.083 回答
2

您可以使用find

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

小提琴

JSPerf关于所有三个选项。

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

$(this).find('> div:nth-of-type(3)').show(); 
于 2013-07-03T03:47:37.920 回答
1

你也可以这样使用

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

    $('> div:nth-child(3)', this).toggle();
});
于 2013-07-03T03:59:30.673 回答