jQuery's :nth-child and :first-child selecting wrong element

Question

I am using a combination of Soundmanager2 and RoyalCarousel to get a playlist style carousel working. My goal now is to make it so that when a specific slide is selected, either through use of the back/forward buttons or the 'skip to' links, the appropriate song plays. This works for all except the first slide, which consistently triggers the last slide to start playing. Triggering the last slide also triggers the last slide, so it's not like these two are reversed. To see this in action. http://ably.ca/hootch

$(".rsNavItem").live('click', function(){
  var id = $(this).index() + 1;
  $(".rsContainer div:nth-child("+ id +") .ui360 .sm2-360btn").click();
});

I've checked and rechecked everything here, :nth-child(1) selects :nth-child(9) every single time. Even testing for id == 1 and using first-child doesn't work... Any ideas?

Answer 1

Try this

var rsContainer = $('.rsContainer');
$('.rsNavItem').live('click', function(){
    var index = $(this).index();

    $('.rsSlide:eq(' + index + ') .ui360 .sm2-360btn', rsContainer).click();
});