-1

我试图在悬停时定位元素的第 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)，因为我的标记在我的页面上重复显示不同的产品。所以我只想针对我悬停的特定产品。

我在吠叫错误的树吗？

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

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 回答