다음을 사용하여 요소 위치를 기준으로 변수 값을 변경하십시오.

Question

li의 위치를 ​​식별하는 변수를 가질 수 있어야하며 을 사용하여 각 개별 변수 번호에 따라 값을 할당하십시오. li .

조금 혼란스러워 보일 수 있으므로 조금 더 잘 설명하기 위해 jsfiddle을 작성했습니다. 3 개의 li이 있습니다. 버튼/링크를 클릭하면 을 사용하여 :nth-child 위치에 따라 펼쳐지도록합니다. 그러나 현재 내가 가지고있는 문제는 변수 (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"); 
    }); 
}); 

좀 더 그것을 설명 드리겠습니다

여기 내 코드입니다. 기본 전제는 각 li에 대해 변수 itemNumber을 변경해야하며 임의의 수의 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"); 
    });