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

如果您确实要存储最后一个宽度，请在每个＆lt; li＆gt;中使用.data()

类似

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

然后就像，

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

这是一个粗略的例子，但我想它比数组更好......这样，你确定每个＆lt; li＆gt;保持正确的价值......

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];
}

jQuery找到'n--child'值

3 个答案: