[Selector] JQ - element ~ siblings 선택자 - 형제요소 모두 선택 (= 형제선택자 = 시블링선택자 = 물결무늬선택자)

1. element ~ siblings 예제 - 형제요소 모두 선택
2. element ~ siblings 정의
3. element ~ siblings 구문

element ~ siblings 예제 - 형제요소 모두 선택

(예) div 요소의 p형제요소 모두 선택

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div ~ p").css("background-color", "yellow");

});

</script>

<style>

div {border:1px solid black; padding:10px;}

</style>

<div>홈짱닷컴 Homzzang.com</div>

<p>가</p>

<p>나</p>

<div>

  <p>다</p>

</div>

<h2>라</h2>

<p>마</p>

 

결과보기

element ~ siblings 정의

 

지정 요소의 지정 형제요소 모두 선택.

 

---

 

※ element 요소와 siblings 요소의 부모는 동일 요소여야 함.

※ ~ 기호 앞뒤 공백 유무는 상관 없음. 

 

element ~ siblings 구문

 

("element ~ siblings")

 

---

[매개변수]

 

element 

필수. 지정 요소.

 

siblings

필수. 지정 요소의 지정 형제요소.