jQuery 트리버전 - prevUntil() 메서드

예제

모든 p 요소의 클래스 이름이 "selected"인 모든 형제 요소를 찾습니다:

$("p").siblings(".selected")

직접 시도해 보세요

정의와 사용법

siblings()는 매칭 집합의 각 요소의 형제를 얻습니다. 선택자를 통해 필터링하는 것은 선택 사항입니다.

문법

.siblings(selector)
매개변수 설명
selector 문자 값, 요소를 일치시키기 위해 사용되는 선택자 표현식을 포함합니다.

상세 설명

DOM 요소 집합을 나타내는 jQuery 객체를 주어지면, .siblings() 메서드는 이 요소의 형제 요소를 DOM 트리에서 검색하고, 일치하는 요소로 새로운 jQuery 객체를 생성할 수 있도록 합니다.

이 메서드는 선택자 표현식을 받아들이며, $() 함수에 전달하는 매개변수와 같은 유형입니다. 이 선택자를 적용하면 요소가 해당 선택자와 일치하는지 확인하여 요소를 필터링합니다.

이 기본적인 내장 목록을 가진 페이지를 생각해 보세요:

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

세 번째 항목부터 시작하면 해당 요소의 형제 요소를 찾을 수 있습니다:

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

직접 시도해 보세요

이곳에서 호출된 결과는 1, 2, 4, 5 번째 항목의 배경을 빨간색으로 설정합니다. 빨간색 배경으로 설정합니다. 선택자 표현식을 적용하지 않았기 때문에 모든 형제 요소가 자연스럽게 객체의 일부가 되었습니다. 선택자를 적용한 경우에만 네 개의 목록 중에 일치하는 항목만 포함됩니다.

원본 요소는 형제 요소에 포함되지 않으며, DOM 트리의 특정 레벨에 있는 모든 요소를 찾으려고 할 때, 중요한 점을 기억하는 것이 중요합니다.