[Jquery] prev(), next() - 이전, 다음 요소 선택하는 방법

   

 

이번 글에서는 형제 요소 관련된 메소드들에 대하여 알아보도록 하겠습니다.

prev() 메소드 - 이전에 위치한 형제 요소 선택

next() 메소드 - 다음에 위치한 형제 요소 선택

 

prev() 메소드와 next() 메소드는 서로 반대되는 기능을 가지고 있지만, 문법은 같습니다.

따라서, next() 메소드만 예를 들어도 prev() 메소드는 충분히 이해하실 수 있을 겁니다.

 

---

next() 메소드

선택한 요소의 바로 다음에 위치해 있는 형제 요소를 선택합니다.

 

아래 예제를 통하여 자세히 알아보도록 하겠습니다.

<script>
   $(function() {
       $("button").on("click", function() {
           $("h4").next()
               .css({"border": "2px solid red"});
       })
   })
</script>

 

출력 결과

 

button을 클릭하면 <h4> 바로 다음의 형제 요소에 빨간색 테두리가 씌워지는 예제였습니다.