Question

以下代码仅对最后一个子进行操作，并触发所有其他子元素的函数。

$('.streetdog').hide();
$('.cat').mouseenter(function(){
    var $catVal = $(".cat").index(this);
    $('.streetdog:nth-child('+$catVal+')').show();
});

您可以在jsfiddle看到该演示。基本上我试图触发特定循环的子元素并悬停.cat

Answer 1

使用:eq代替:nth-child。由于.eq()的效率高于:eq，因此请改用.eq()：

$('.streetdog').hide();
$('.cat').mouseenter(function(){
    var $catVal = $(".cat").index(this);
    $('.streetdog').eq($catVal).show();
});

小提琴：http://jsfiddle.net/rkM8N/1/

$('.streetdog').eq()创建一个由所有类别等于streetdog的元素组成的集合。然后，.eq(n)返回此集合中的 n 元素。

$('.streetdog:nth-child(' + $catVal + ')')选择一个.streetdog元素，该元素是其父级的$catVal子元素。因此，仅在$catVal等于2时才显示元素。

Answer 2

已经给出了一个非常好的答案，但作为替代方案，如果您的HTML结构不会发生变化，您可以使用parent来升级父div和{{ 1}}获取next元素：

.streetdog

这是working example。

$(".streetdog").hide(); $(".cat").mouseenter(function() { $(this).parent().next().show(); });解释了eq的工作原因，nth-child解释了{{1}}

：nth-child（n）伪类很容易与：eq（n）混淆，甚至虽然这两者可以导致显着不同的匹配元素。随着：n-child（n），所有孩子都被计算在内，无论他们是什么是，并且只有在匹配时才选择指定的元素选择器附加到伪类。使用：eq（n）仅选择器附属于伪类计算，不限于儿童选择任何其他元素，并选择第（n + 1）个（n为0）。

得到n-child并采取行动：jQuery

2 个答案: