jQuery를 사용한 선택한 요소 이후의 모든 형제 요소 선택하기

jQuery의 nextAll() 메서드는 선택한 요소 이후에 있는 모든 형제 요소를 선택하는 데 사용됩니다. 특정 클래스를 가진 요소를 선택할 수도 있습니다. 이를 활용하여 특정 클래스를 가진 모든 형제 요소를 선택하고 조작할 수 있습니다.

예제 1: 선택한 요소 이후의 모든 형제 요소 선택하기

$("li.third-item").nextAll().css("color", "blue");

이 예제는 third-item 클래스를 가진 <li> 요소 다음에 오는 모든 형제 요소를 선택하고, 해당 요소의 텍스트 색상을 파란색으로 변경합니다.

예제 2: 선택한 요소 이후의 모든 형제 요소에 클래스 추가하기

$("li.third-item").nextAll().addClass("highlight");

이 예제는 third-item 클래스를 가진 <li> 요소 다음에 오는 모든 형제 요소를 선택하고, 해당 요소에 highlight 클래스를 추가합니다.

예제 3: 선택한 요소 이후의 모든 형제 요소 숨기기

$("li.third-item").nextAll().hide();

이 예제는 third-item 클래스를 가진 <li> 요소 다음에 오는 모든 형제 요소를 선택하고, 해당 요소를 숨깁니다.