獲取孩子並採取行動：jQuery

下面的代碼僅對最後一個孩子起作用，並且它觸發所有其他孩子元素的功能。獲取孩子並採取行動：jQuery

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

您可以在jsfiddle上看到演示。基本上我試圖觸發特定的循環.cat

來源

2011-10-22 Suraj Thapar

使用: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)返回該組中的第012個元素。

$('.streetdog:nth-child(' + $catVal + ')')選擇一個.streetdog元素，它是其父項的子項。因此，僅當$catVal等於2時才顯示元素。

來源

2011-10-22 16:49:13

非常感謝，但我想知道'：eq'和'：nth-child'之間的基本區別是什麼，我搜索了一些論壇，他們都說這兩個都差不多。 –

@tunetosuraj - 查看「nth-child」的jQuery文檔（我已將相關引用複製到我的答案中） - http://api.jquery.com/nth-child-selector/ –

一個完美的答案已經給出，但作爲替代，如果你的HTML結構不會改變，你可以使用parent起牀到父div，並且next得到.streetdog元素：

$(".streetdog").hide(); 
$(".cat").mouseenter(function() { 
    $(this).parent().next().show(); 
});

這是working example。

之所以說eq作品，但nth-child不被jQuery docs解釋說：

的：第n個孩子（n）的僞類是很容易混淆：EQ（N），甚至雖然這兩者可能導致顯着不同的匹配元素。對於第n個孩子（n），所有孩子都會被計數，不管它們是什麼，並且指定的元素只有在匹配附加到僞類的選擇符時才被選擇。利用：eq（n）只對附加到僞類的選擇器進行計數，不限於任何其他元素的子元素，並且選擇第（n + 1）個元素（n是從0開始的）。

來源

2011-10-22 16:51:30

獲取孩子並採取行動：jQuery

回答

相關問題