ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
제이쿼리 선택자는 매우 편리한데요~ 만약 어떤 엘리먼트를 선택자로 찾았는데 그 다음에 위치한 엘리먼트를 가져오는 방법을 알아볼까합니다.
# 제이쿼리를 사용하여 다음 엘리먼트 가져오기제이쿼리는 다음에 위치한 엘리먼트(형제 엘리먼트 중 다음이죠)를 가져올 수 있도록 아래와 같이 두 개의 메소드를 제공합니다.
$(element).next(선택자)
// 다음 엘리먼트 하나만 반환
$(element).nextAll(선택자)
// 다음에 위치한 모든 엘리먼트를 배열로 반환
위 두 메소드 모두 다음에 엘리먼트를 찾아 가져오는 제이쿼리 메소드입니다. 다만 next()는 다음에 위치한 하나만 가져오고 두 번째 nextAll()은 다음에 위치한 모든 엘리먼트를 가져오는 것이 차이점입니다.
! next(), nextAll() 필터링 기능 사용하기
next() 또는 nextAll()을 사용할 때 ()안에 선택자를 아래처럼 같이 지정할 수 있습니다. 이 경우 필터링되어 선택자에 해당하는 것만 반환하게 되죠. 간단한 문법을 알아보면 아래처럼 사용할 수 있겠죠.
먼저 next('p')는 다음의 엘리먼트가 p태그인 경우에만 반환하게 됩니다. p가 아니라면? 당연히 빈 값을 반환할 것입니다. 이와달리 nextAll('p')는 다음에 위치한 모든 엘리먼트에서 p태그를 찾아 반환하겠죠. 물론 p태그가 없다면 빈 배열값만 반환하게 됩니다. 그럼 아래에서 간단한 예제를 만들어 알아봅니다.
! 제이쿼리 next() 예제보기그럼 간단하게 예제를 만들어보도록 하겠습니다. 바로 클릭하면 다음 엘리먼트의 색을 바꾸는 예제입니다. 먼저 엘리먼트 요소들을 만들어볼께요.
이제 제이쿼리를 사용하여 클릭할 경우 다음 요소에 red 클래스명을 추가하거나 제거하도록 작성합니다.
red라는 클래스명이 추가되면 빨간색으로 표시되야겠죠. css에 선언합니다.
여기까지가 코드 작성은 모두 끝입니다. 그럼 동작해보겠습니다. 어떻게 나타나는지 아래에서 확인해보시고 직접 클릭해보세요.
위 버튼을 클릭하면 바로 다음 요소가 빨간색으로 바뀌는 것을 보실 수 있습니다.
# 마치면서여기까지 제이쿼리(jquery)의 next(), nextAll() 메소드를 알아보았습니다. 형제 요소를 찾는 경우 아래와 같은 메소드가 사용되는데요...
위 메소드 모두 많이 사용되므로 함께 알아두시면 좋겠습니다.
# 제이쿼리를 사용하여 다음 엘리먼트 가져오기제이쿼리는 다음에 위치한 엘리먼트(형제 엘리먼트 중 다음이죠)를 가져올 수 있도록 아래와 같이 두 개의 메소드를 제공합니다.
$(element).next(선택자)
// 다음 엘리먼트 하나만 반환
$(element).nextAll(선택자)
// 다음에 위치한 모든 엘리먼트를 배열로 반환
위 두 메소드 모두 다음에 엘리먼트를 찾아 가져오는 제이쿼리 메소드입니다. 다만 next()는 다음에 위치한 하나만 가져오고 두 번째 nextAll()은 다음에 위치한 모든 엘리먼트를 가져오는 것이 차이점입니다.
! next(), nextAll() 필터링 기능 사용하기
next() 또는 nextAll()을 사용할 때 ()안에 선택자를 아래처럼 같이 지정할 수 있습니다. 이 경우 필터링되어 선택자에 해당하는 것만 반환하게 되죠. 간단한 문법을 알아보면 아래처럼 사용할 수 있겠죠.
$(selector).next('p');
$(selector).nextAll('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>
<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');
});
$(this).next().toggleClass('red');
});
red라는 클래스명이 추가되면 빨간색으로 표시되야겠죠. css에 선언합니다.
.red {
color: red;
}
color: red;
}
여기까지가 코드 작성은 모두 끝입니다. 그럼 동작해보겠습니다. 어떻게 나타나는지 아래에서 확인해보시고 직접 클릭해보세요.
위 버튼을 클릭하면 바로 다음 요소가 빨간색으로 바뀌는 것을 보실 수 있습니다.
# 마치면서여기까지 제이쿼리(jquery)의 next(), nextAll() 메소드를 알아보았습니다. 형제 요소를 찾는 경우 아래와 같은 메소드가 사용되는데요...
next()
nextAll()
prev() // 이전 요소 선택
prevAll() // 이전 요소 모두 선택
siblings() // 모든 형제 요소를 선택
nextAll()
prev() // 이전 요소 선택
prevAll() // 이전 요소 모두 선택
siblings() // 모든 형제 요소를 선택
위 메소드 모두 많이 사용되므로 함께 알아두시면 좋겠습니다.
제이쿼리 when() 메소드 알아보기
