n 번째 자식 가져 오기 및 작동 : jQuery

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 + ')') 요소를 선택합니다.이 요소는 부모의 자식입니다 ($catVal). 따라서 요소는 $catVal이 2 일 때만 표시됩니다. .streetdog 요소를 얻을 수 next을

Answer 2

완벽하게 좋은 대답은 이미 주어졌다, 그러나 당신의 HTML 구조를 변경하지 않을 경우 대안으로, 당신은 부모 div까지 얻을 수 parent을 사용할 수 있으며, :

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

여기에 working example이 있습니다.

eq 작품,하지만 nth-child는 jQuery docs에 의해 설명되지 않는 이유 :

이

: 심지어하지만 (N) EQ : n 번째 자녀 (N) 의사 클래스와 쉽게 혼동 두 가지 요소가 크게 달라질 수 있습니다. : nth-child (n)을 사용하면 에 관계없이 모든 하위 항목이 계산되고 의사 클래스에 연결된 선택기와 일치하는 경우에만 지정된 요소가 선택됩니다. : eq (n) 의사 클래스에 부착 된 셀렉터 만이 카운트되며 다른 요소의 자식에 국한되지 않고 의 하위 항목에 한정되지 않고 (n + 1) 번째 (n은 0 기반)가 선택됩니다.