jQuery找到'nth-child'值答案

【问题标题】：jQuery finding 'nth-child' valuejQuery找到'nth-child'值
【发布时间】：2011-02-26 06:45:17
【问题描述】：

我将 ul 设置为导航，我将在悬停时对其进行动画处理。

由于所有导航项的宽度不同，我会将它们的默认宽度存储在一个数组中，以便在悬停时将这些宽度传回给 animate 方法。

我需要一种方法来找到元素是什么'nth-child'，以便从数组中检索正确的宽度。

类似：

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

这样我就可以做到了：

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

任何建议都会对我有很大帮助 - 如果有更好的方法来做这种事情，我很乐意接受指点！

【问题讨论】：

'nth-child' ??或者你真的是指最后一个孩子？

标签： jquery hover jquery-animate

【解决方案1】：

我认为index 是您正在寻找的。它告诉你一个元素相对于它的兄弟元素的位置，例如，父元素中的第二个元素是索引 1。你可以使用选择器，这样你就只考虑某些兄弟元素而不考虑其他元素，等等。

【讨论】：

就是这个；）我以前也用过这个；傻我！使用 index() 我可以执行以下操作： alert('Index: ' + $('ul#nav li a').index($(this)));

【解决方案2】：

如果您真的想存储最后一个宽度，请在每个

中使用.data()

类似

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

然后类似，

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

这是一个粗略的例子，但我想它比数组更好......这样，你确定每个

都持有正确的值......

【讨论】：

【解决方案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];
}

【讨论】：