본문으로 바로가기

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

category 개발/jQuery 2018. 6. 24. 18:01

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 이 붙었다고 해서 조건에 맞는 모든 객체를 배열로 리턴해주는 것은 아니므로 주의해서 사용하자.


댓글을 달아 주세요