使用：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更改变量li，并且可以有任意数量的li。

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");
     });