Why is .index() always returning 0

Question

I\'m confused as to why .index() is returning 0 in this code. Shouldn\'t it return the index of where it\'s found in the array of jquery objects?

Answer 1

Your anchor elements don't have any siblings, so they're all index 0. They're all nested in their own

, which if I'm not mistaken, is invalid markup without include
• around the anchors.

  I would change your HTML to this:

  
      
  
          
  Link 1
          
  Link 2
          
  Link 3
          
  Link 4
      
  
  
      
  
          
  this is a
      
     
      
  
          
  this is b
      
      
  
          
  this is c
      
      
  
          
  this is d
      
  
  

  And you JS to this:

  $('.parent  div').hide();
  
  $('#nav a').click(function() {
      // Notice, I'm going up to the parent 
   and then calling index().
      var $div = $('.parent > div').eq($(this).parent().index());
      $div.show();
      $('.parent > div').not($div).hide();
  });​
  

  Working example