[Jquery] prev, next, siblings

    <ul>
        <li>리스트1</li>
        <li>리스트2</li>  <!--prev--> 
        <li id="me">리스트3</li> <!--기준점-->
        <li>리스트4</li>  <!--next-->
        <li>리스트5</li>
    </ul>

 

위와 같은 상황에 me를 기준점으로 이전, 이후의 요소를 선택하는 방법이 prev, next이다.

코드는 다음과 같다.

 

        $(document).ready(function(){
            $("#me").prev().css("color","red")
            $("#me").next().css("color","blue")
        })

 

그리고 이전의 요소 모두, 다음 요소 모두를 선택하는 방법도 있다.

 

        $(document).ready(function(){
            $("#me").prevAll().css("color","red")
            $("#me").nextAll().css("color","blue")
        })

 

위와 같이 prevAll, nextAll을 사용해주면 된다.

그리고 기준점부터 원하는 요소 바로 앞까지 선택할 수도 있는데, until을 사용하면 된다.

 

        $(document).ready(function(){
            $("#me").prevUntil("#until").css("color","red")
            //me에서 until전까지 (until미포함)
        })

 

me부터 until이라는 id를 가진 요소의 앞까지 선택하는데 이때 until은 포함되지 않는다.

 

그리고 형제자매요소를 선택하는 선택자인 siblings가 있다.

 

        $(document).ready(function(){
            $("#me").siblings().css("color","red")
        })

 

위와 같이 me를 기준으로 같은 선상에 있는 형제자매 요소를 모두 선택한다.