jQuery находит значение 'nth-child'

Question

У меня есть ul, настроенный как навигация, которую я буду анимировать при наведении.

Так как все элементы навигации имеют разную ширину, я буду хранить их значения по умолчанию в массиве, чтобы при наведении указателя эти значения можно было передать обратно в метод animate.

Мне нужен способ узнать, что является nth-child для элемента, чтобы получить правильную ширину из массива.

Что-то вроде:

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

Так что тогда я могу сделать:

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

Любые предложения очень помогли бы мне - и если бы был лучший способ сделать такое, я бы с радостью принял указатели!

Answer 1

Я думаю index - это то, что вы ищете. Он сообщает вам, где элемент относится к своим братьям и сестрам, например, второй элемент в родительском элементе - это индекс 1. Вы можете использовать селекторы, поэтому вы рассматриваете только определенные братья и сестры, а не другие и т. Д.

Answer 2

, если вы действительно хотите сохранить последнюю ширину, используйте .data() в каждом

что-то вроде

$('ul li').css('width', function(i,v){
  $(this).data('lastWidth',v);
  return v;
})

тогда что-то вроде

$('li').animate({'width': $(this).data('lastWidth') }, 400);

это грубый пример, но я думаю, что он лучше, чем массив ... таким образом, вы уверены, что каждый

содержит правильное значение ....

Answer 3

html вот так

<ul id="ul">
    <li style="width: 50px;">1</li>
    <li style="width: 75px;">2</li>
    <li style="width: 100px;">3</li>
</ul>

и такой скрипт

$(function(){

    arrayOfWidth = [];
    liItems = $('#ul li');
    someLi = $('#ul li:eq(1)'); // just for example

    liItems.each(function(index, domElement){
        var $this = $(domElement);
        arrayOfWidth.push($this.width());
    });

    alert(getWidth(someLi));

});

function getWidth(li){
    var index = liItems.index(li);
    return arrayOfWidth[index];
}