메서드 siblings

메서드 siblings는 동일한 부모 내에서 요소의 모든 형제 요소를 찾습니다.

문법

형제 요소 가져오기:

javascript.siblings();

지정된 선택자로 형제 요소를 필터링할 수도 있습니다 (셋에는 해당 선택자를 만족하는 형제 요소들만 남습니다):

javascript.siblings(선택자);

예제

요소 #test를 찾아서 그 모든 형제 요소에 메서드 html를 사용해 텍스트 '!'를 설정해 봅시다:

html<p>outside</p>
<div>
  <p>inside</p>
  <p>inside</p>
  <p id="test">inside</p>
  <p>inside</p>
  <p>inside</p>
</div>
<p>outside</p>
javascript$('#test').siblings().html('!');

HTML 코드는 다음과 같이 될 것입니다:

html<p>outside</p>
<div>
  <p>!</p>
  <p>!</p>
  <p id="test">inside</p>
  <p>!</p>
  <p>!</p>
</div>
<p>outside</p>

예제

요소 #test를 찾아서 클래스 www가 있는 모든 형제 요소에 메서드 html를 사용해 텍스트 '!'를 설정해 봅시다:

html<p>outside</p>
<div>
  <p>inside</p>
  <p class="www">inside</p>
  <p>inside</p>
  <p id="test">inside</p>
  <p>inside</p>
  <p class="www">inside</p>
  <p>inside</p>
</div>
<p>outside</p>
javascript$('#test').siblings('.www').html('!');

HTML 코드는 다음과 같이 될 것입니다:

html<p>outside</p>
<div>
  <p>inside</p>
  <p class="www">!</p>
  <p>inside</p>
  <p id="test">inside</p>
  <p>inside</p>
  <p class="www">!</p>
  <p>inside</p>
</div>
<p>outside</p>

함께 보기

  • 요소의 바로 위 형제 요소를 가져오는 메서드 prev,
  • 요소의 바로 아래 형제 요소를 가져오는 메서드 next,
  • 요소의 부모 요소를 가져오는 메서드 parent,