jQuery 트리버싱 - next() 메서드

jQuery 트리버싱 매뉴얼

예제

각 문단의 다음 형제 요소를 찾아, "selected" 클래스가 있는 문단만 선택합니다:

$("p");.next(".selected");.css("background", "yellow");

직접 시도해 보세요

정의와 사용법

next()은 매치 요소 집합의 각 요소의 다음 형제 요소를 얻습니다. 선택자를 제공하면 해당 선택자와 일치하는 다음 형제 요소를 반환합니다.

문법

.next(selector)
파라미터 설명
selector 문자 값, 요소를 일치시키기 위해 사용되는 선택자 표현식을 포함합니다.

상세 설명

jQuery 객체를 통해 DOM 요소 집합을 주어진 경우, .next() 메서드는 DOM 트리에서 요소의 다음 형제 요소를 검색하고, 일치하는 요소로 새로운 jQuery 객체를 생성합니다.

이 메서드는 선택자 표현식을 받아들이며, $() 함수에 전달한 것과 같은 유형입니다. 그 다음의 형제 요소가 선택자와 일치하면, 새로운 jQuery 객체에 포함되며, 일치하지 않으면 제외됩니다.

아래의 간단한 목록을 생각해 보세요:

<ul>
   <li>리스트 아이템 1</li>
   <li>리스트 아이템 2</li>
   <li class="third-item">리스트 아이템 3</li>
   <li>리스트 아이템 4</li>
   <li>리스트 아이템 5</li>
</ul>

프로젝트 3에서 시작하면, 그 다음에 나타나는 요소를 찾을 수 있습니다:

$('li.third-item');.next();.css('background-color', 'red');

직접 시도해 보세요

이번 호출 결과는, 프로젝트 4가 빨간 배경으로 설정되었습니다. 선택자 표현식을 적용하지 않았기 때문에, 그 다음 요소는 명확하게 객체의 일부로 포함되었습니다. 선택자를 적용한 경우, 포함하기 전에 일치 여부를 검사합니다.

jQuery 트리버싱 매뉴얼