jQuery Index of Hovered Button

Question

I'm not sure why I'm not figuring this out... I do this all the time. Must be having a "Monday Moment." But, basically, here's what I have:

$('#nav ul li a').hover(hoverOn, hoverOff); function hoverOn (evt) { //how do I get the index of which button was hovered (from the jQuery group)? }

My code looks like this:

<div id="nav"> <ul> <li><a href="#" id="index">Home</a></li> <li><a href="#" id="about">About Us</a></li> <li><a href="#" id="services">Services</a></li> <li><a href="#" id="resources">Resources</a></li> <li><a href="#" id="contact">Contact</a></li> </ul> </div>

Showing your corresponding DOM to the jQuery code could really help you know... — gdoron
– gdoron, Commented May 7, 2012 at 17:54
And showing us a JS Fiddle, or similar, live demo would also help a lot. — David Thomas
– David Thomas, Commented May 7, 2012 at 17:57
Do you want the index of the hovered <a> or the index of the <li> which it's <a> child was hovered? — gdoron
– gdoron, Commented May 7, 2012 at 18:05
My apologies for not showing more code. I thought it was a straightforward enough case, and I'm relatively new around here, so I am still learning the best posting practices. My code looked like this: <div id="nav"> <ul> <li><a href="#" id="index">Home</a></li> <li><a href="#" id="about">About Us</a></li> <li><a href="#" id="services">Services</a></li> <li><a href="#" id="resources">Resources</a></li> <li><a href="#" id="contact">Contact</a></li> </ul> </div> — Steve C.
– Steve C., Commented May 8, 2012 at 18:40
My intent was to get the <a> index, but the <li> solution below worked because it returned the 0-based index I was looking for in each case. — Steve C.
– Steve C., Commented May 8, 2012 at 18:41

elclanrs · Accepted Answer · 2012-05-07 17:55:08Z

1

If your element is an <a> then you need to get the parent <li> index:

var idx = $(this).parent().index()

answered May 7, 2012 at 17:55

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve C. Over a year ago

"If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements." OK, that 'relative to its siblings' is throwing me. Is it just intuitive enough to see all the sibling li tags?

elclanrs Over a year ago

It works because li is the immediate children of ul but a isnt, and the index you're looking for is the position within ul and not the position of a whitin li. Hope this makes sense...

gdoron · Accepted Answer · 2012-05-09 01:53:56Z

1

hoverOn (evt){ var index = $(this).parent().index(); }

edited May 9, 2012 at 1:53

answered May 7, 2012 at 17:53

gdoron

151k59 gold badges302 silver badges376 bronze badges

Collectives™ on Stack Overflow

jQuery Index of Hovered Button

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related