Question

The code below only acts upon the last child and it triggers the function for all the other child elements.

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

You can see the demo at jsfiddle.
Basically I’m trying to trigger the child element of the specific loop and hover of .cat

Answer 1

Use :eq instead of :nth-child. Since the .eq() is more efficient than :eq, use .eq() instead:

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

Fiddle: http://jsfiddle.net/rkM8N/1/

$('.streetdog').eq() creates a set consisting of all elements whose classname equals streetdog. Then, .eq(n) returns the nth element in this set.

$('.streetdog:nth-child(' + $catVal + ')') select a .streetdog element which is the $catValth child of its parent. Hence, the elements are only shown when $catVal equals two.