[JQuery] prev, prevAll, next, nextAll, siblings, even, odd

prev, prevAll

<ul>
    <li>리스트1</li>
    <li>리스트2</li>
    <li id="li3">리스트3</li>
    <li>리스트4</li>
    <li>리스트5</li>
</ul>
<button onclick="myFunc()">클릭하기</button>

$("#li3").prev().css("backgroundColor","red");
//previous

 

prev는 이전 요소를 선택하는 기능을 한다. 리스트3 을 선택해서, 이전 요소의 배경색을 빨간색으로 선택하면 이전 요소인 리스트2의 배경색이 빨갛게 변한다.

 

 

 

$("#li3").prevAll().css("backgroundColor","red");

prevAll은 이전 전체 요소들을 선택하는 기능을 한다. 리스트3의 이전 요소들인 리스트1과 리스트2의 배경색이 변한다.

 

 

 

 

next, nextAll

$("#li3").next().css("backgroundColor","red");

next는 선택한 요소의 다음 요소를 선택하는 기능이다. 선택된 리스트3의 다음 요소인 리스트4의 배경색이 변경된다.

 

 

 

$("#li3").nextAll().css("backgroundColor","red");

nextAll은 선택한 요소의 다음 요소 전체를 선택한다. 리스트3의 다음 요소들인 리스트4, 리스트5 모두 배경색이 변한다.

 

 

 

 

siblings

$("#li3").siblings().css("backgroundColor","red");
//siblings - 형제, 자매 (이전 요소 모두, 다음 요소 모두)

siblings는 형제, 자매라는 뜻으로, 이전 요소 모두와 다음 요소 모두를 선택하는 기능을 한다. 선택된 리스트3의 형제 요소들 모두 배경색을 변경한다.

 

 

 

 

eq

$("ul>li").eq(2).css("backgroundColor","red");
//eq(2) - 리스트의 3번째 (0부터 시작함)

eq 메서드는 해당 모든 리스트 중에서 몇번째 요소를 선택할지 정할 수 있다. 0번째 요소 부터 시작하며, 첫번째 리스트는 eq(0)이라고 적어야 하니 주의해야 한다. 리스트3을 선택하기 위해 eq(2)로 작성했다.

 

 

 

 

even

$("ul>li").even().css("backgroundColor","red");
// 0, 2, 4 ... 짝수번째 선택

0번, 2번, 4번 같은 짝수번째 요소를 선택할 때 사용한다.

 

 

 

 

odd

$("ul>li").odd().css("backgroundColor","red");
// 1, 3, 5 ... 홀수번째 선택

1번, 3번 5번 같은 홀수번째 요소를 선택할 때 사용한다.