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




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

next()
nextAll()


위 두 메소드 모두 다음에 엘리먼트를 찾아 가져오지만 두 번째 nextAll()은 모든 엘리먼트를 가져오는 반면 next()는 바로 다음 하나만 가져오는 것이 차이점입니다.

간단한 문법을 알아보면 안에 인자로 선택자 값을 추가할 수 있습니다.
$(selector).next(nextSelector);

여기서 nextSelector 부분은 없어도 무방하지만 찾은 값이 여러개인 경우 필터링이 가능합니다. 즉 원하는 조건을 추가할 수 있죠. nextAll() 역시 동일하게 사용가능합니다. 그럼 예제로 넘어가죠.


! 제이쿼리 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()  //  모든 형제 요소를 선택

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