Question

I am having an issue with the following bit of code. I’m trying to retrieve the index of the li element that is currently being hovered over.

HTML:

<div id="featured">
         <ul>
              <li class="active">foo</li>
              <li class="">bar</li>
              <li class="">giraffe</li>
         </ul>
    </div>

JavaScript:

$(document).ready(function () {
        $('#featured ul li').hover(function(){
             console.log($(this).index()); //returns -1
             console.log($('li').index($(this))); //returns integers beginning at 6
        });
    });

The first option in javascript I used returns a -1 and the second returns integers starting at 6.

I’m lost. Please someone show me what I’m doing wrong! 🙂

Also, I am using the version of jQuery embedded withing my drupal install, 1.2.6

Edit:Fixed the syntax on the second console.log of my JS example.

Answer 1

The problem is with you version of jquery, i tested it with 1.2.6, 1.3.2 and it worked as you said, i tested it with jQuery 1.4.4 and it’s working. Have you considered upgrading the version of jquery or loading a newer vwrsion and using noConflict()?

EDIT – you could use this as a workaround:

    $('#featured ul li').hover(function(event){
         console.log($(this).prevAll('li').length); //returns 0,1,2
   });

fiddle (tested IE9, FF5 and Chrome 12): http://jsfiddle.net/WWw4n/