Question

I have a ul set up as navigation, which I’ll be animating on hover.

As all the nav items are different widths, I’ll be storing their default widths in an Array, so that on hover out, these widths can be passed back in to the animate method.

What I need is a way to find what ‘nth-child’ the element is in order to retrieve the correct width from the array.

Something like:

var count = $(this).count(); //obviously this isn't right!

So that then I can do:

$(this).animate({'width':array(count)}, 400);

Any suggestions would help me a lot – and if there’s a better way to do this kind of thing I’d gladly accept pointers!

Answer 1

I think index is what you’re looking for. It tells you where an element is relative to its siblings, e.g., the second element within the parent is index 1. You can use selectors so you only consider certain siblings and not others, etc.