[jQuery] 제이쿼리 첫번째, 마지막 요소 스타일 추가하기 by first(), last()

제이쿼리로 첫 번째, 마지막 요소를 탐색하는 방법에 대해 알아보도록 하겠습니다.

 

1. 첫 번째 마지막 요소 선택하기.

first(), last() 함수를 사용해 선택할 수 있습니다.

 <p class="a">1</p>
 <p class="b">2</p>
 <p class="c">3</p>
 <p class="d">4</p>
 <script>
     console.log($('p').first())
     console.log($('p').last())
 </script>

결과를 보면 첫 번째 요소인 class a와 마지막 요소인 d가 선택된 것을 확인할 수 있습니다.

 

2.css 스타일 추가하기.

 <p class="a">1</p>
 <p class="b">2</p>
 <p class="c">3</p>
 <p class="d">4</p>
 <script>
     $('p').first().css('background-color','brown')
     $('p').last().css('background-color','brown')
 </script>