제이쿼리 선택자는 매우 편리한데요~ 만약 어떤 엘리먼트를 선택자로 찾았는데 그 다음에 위치한 엘리먼트를 가져오는 방법을 알아볼까합니다.




# 제이쿼리를 사용하여 다음 엘리먼트 가져오기제이쿼리는 다음에 위치한 엘리먼트(형제 엘리먼트 중 다음이죠)를 가져올 수 있도록 아래와 같이 두 개의 메소드를 제공합니다.

$(element).next(선택자)
// 다음 엘리먼트 하나만 반환

$(element).nextAll(선택자)
// 다음에 위치한 모든 엘리먼트를 배열로 반환


위 두 메소드 모두 다음에 엘리먼트를 찾아 가져오는 제이쿼리 메소드입니다. 다만 next()는 다음에 위치한 하나만 가져오고 두 번째 nextAll()은 다음에 위치한 모든 엘리먼트를 가져오는 것이 차이점입니다.

! next(), nextAll() 필터링 기능 사용하기
next() 또는 nextAll()을 사용할 때 ()안에 선택자를 아래처럼 같이 지정할 수 있습니다. 이 경우 필터링되어 선택자에 해당하는 것만 반환하게 되죠. 간단한 문법을 알아보면 아래처럼 사용할 수 있겠죠.
$(selector).next('p');

$(selector).nextAll('p');

먼저 next('p')는 다음의 엘리먼트가 p태그인 경우에만 반환하게 됩니다. p가 아니라면? 당연히 빈 값을 반환할 것입니다. 이와달리 nextAll('p')는 다음에 위치한 모든 엘리먼트에서 p태그를 찾아 반환하겠죠. 물론 p태그가 없다면 빈 배열값만 반환하게 됩니다. 그럼 아래에서 간단한 예제를 만들어 알아봅니다.



! 제이쿼리 next() 예제보기그럼 간단하게 예제를 만들어보도록 하겠습니다. 바로 클릭하면 다음 엘리먼트의 색을 바꾸는 예제입니다. 먼저 엘리먼트 요소들을 만들어볼께요.
<div class="container-test">
  <button class="test-btn">Click</btn>
  <button class="test-btn no">Click</btn>
  <button class="test-btn">Click</btn>
  <button class="test-btn">Click</btn>
</div>

이제 제이쿼리를 사용하여 클릭할 경우 다음 요소에 red 클래스명을 추가하거나 제거하도록 작성합니다.
$('.test-btn').click(function() {
  $(this).next().toggleClass('red');
});

red라는 클래스명이 추가되면 빨간색으로 표시되야겠죠. css에 선언합니다.
.red {
  color: red;
}

여기까지가 코드 작성은 모두 끝입니다. 그럼 동작해보겠습니다. 어떻게 나타나는지 아래에서 확인해보시고 직접 클릭해보세요.


위 버튼을 클릭하면 바로 다음 요소가 빨간색으로 바뀌는 것을 보실 수 있습니다.



# 마치면서여기까지 제이쿼리(jquery)의 next(), nextAll() 메소드를 알아보았습니다. 형제 요소를 찾는 경우 아래와 같은 메소드가 사용되는데요...
next()
nextAll()
prev()  //  이전 요소 선택
prevAll()  //  이전 요소 모두 선택
siblings()  //  모든 형제 요소를 선택

위 메소드 모두 많이 사용되므로 함께 알아두시면 좋겠습니다.