jquery - 使用 :nth-child 根据元素位置更改变量值

Question

我需要能够有一个变量来标识 的位置li，使用.index()然后根据每个人的变量编号为其分配一个值li。

这听起来可能有点令人困惑，所以我写了一个jsfiddle来更好地解释它。有 3 个li，当我单击一个按钮/链接时，我需要它们根据它们的:nth-child位置展开，使用position: absolute. 但是，我目前遇到的问题是变量 ( itemNumber) 是相同的，并且对于每个li.

这是我的代码：

<ul>
    <li>Lorem Ipsum 1</li>
    <li>Lorem Ipsum 2</li>
    <li>Lorem Ipsum 3</li>
</ul>
<a href="#">Click me</a>

和JS：

var itemNumber = $("ul li").index() + 1;

 $("a").click(function () {
     $("ul").toggleClass("expanded");
     $("ul li").each(function () {
         $("ul li:nth-child(" + itemNumber + "n)").css("top", itemNumber * 30 + "px");
     });
 });

我很乐意解释它，因为这个想法有点令人困惑。基本前提是，我需要itemNumber为 each 改变变量li，并且可以有任意数量的lis。

Answer 1

你可以试试这个——

$("ul li").each(function (index,element) {
         $("ul li:nth-child(" + index + "n)").css("top", index * 30 + "px");
});

或更好

$("ul li").each(function (index,element) {
         $(this).css("top", index * 30 + "px");
});

Answer 2

改用.eq：

var itemNumber = $("ul li").index(); // eq is 0 based index

$("ul li").each(function (i, v) {
         $("ul li").eq(itemNumber).css("top", (itemNumber + 1) * 30 + "px");
     });