jQuery找到'nth-child'值

Posted 2023-05-08

【中文标题】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' ??或者你真的是指最后一个孩子？

【参考方案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];