jQuery (제이쿼리) - jQuery next(), nextAll()

next() 함수는 셀렉터로 지정한 객체의 다음 객체(동일 노드 혹은 하위 노드)를 선택해주는 함수인데

사실 이걸 어디다 써먹어야 하는지는 공부로 작성하고 있는 지금은 와닿지는 않는다.

 

기본적인 문법은 다음과 같다.

$(document).ready(function() {
	// 반갑습니다 가 선택 된다.
	alert($("div").next().html());
    // 반갑습니다 가 선택 된다.
	alert($("div").next("b").html());
    // undefined 가 발생한다.
    alert($("div").next("p").html());
});

<div>안녕하세요</div>
<b>반갑습니다</b>
<p>어서오세요</p>
<b>웰컴</b>

파라미터로 셀렉터를 넣을 수 있으며 파라미터를 넣을 경우 대상 셀렉터의 바로 다음에 위치한 객체가 

파라미터로 넣어서 선택 된 객체와 일치할 경우에만 값을 리턴한다.

 

즉, 세번째 예제인 $("div").next("p").html() 의 경우에는 값이 일치하지 않으므로 undefined 가 발생하게 된다.

 

그럼 여기에서 중간의 b 를 건너 뛰고 p 를 선택하고 싶은 경우에는 어떻게 하느냐 하면

이럴 경우를 대비해서 존재하는 nextAll() 함수를 사용하면 된다.

$(document).ready(function() {
	// 반갑습니다 가 선택 된다.
	alert($("div").nextAll().html());
    // 반갑습니다 가 선택 된다.
	alert($("div").nextAll("b").html());
    // 어서오세요가 선택 된다.
    alert($("div").nextAll("p").html());
});
안녕하세요
반갑습니다
어서오세요
웰컴

파라미터를 주지 않고 사용할 경우 next() 함수와 동일하게 작동하며 파라미터를 입력할 경우 해당 조건에 맞는 가장 첫번째 값을 리턴한다.

단, All 이 붙었다고 해서 조건에 맞는 모든 객체를 배열로 리턴해주는 것은 아니므로 주의해서 사용하자.