개발노트 :: 제이쿼리(Jquery) 부모, 형제, 자식 선택자#3

제이쿼리(Jquery) 부모, 형제, 자식 선택자#3

제이쿼리에 요소를 선택 후 선택된 요소에서 부모, 형제, 자식 요소를 찾는 방법에 대해서 알아보겠습니다.

선택된 요소를 감싸고 있는 상위 노드를 부모, 반대로 선택된 요소가 어떤한 요소를 감싸고 있을때 감쌓여진 요소를 자식, 또는 선택된 요소와 같은 트리위치에 있는 요소들을 형제 요소라고 부릅니다.

 

 

1. 제이쿼리(Jquery) 부모 선택자 함수 표

선택자	예시	설명
.parent( [selector] )	$("#selector").parent() or  $("#selector").parent([selector])	1. 매개변수가 있을 경우  선택된 요소에 부모 노드 중에 해당되는 요소를 찾음    2. 매개변수가 없는 경우 선택된 요소에 부모 노드 요소를 찾음
.parents( [selector] )	$("#selector").parents()  or  $("#selector").parents([selector])	1. 매개변수가 있는 경우 선택된 요소에 최상위 부모 노드 중에 해당되는 요소를 찾음   2. 매개변수가 없는 경우 선택된 요소에 최상위 부모 노드 요소 전체를 찾음
.closest( [selector] )	$("#selector").closest( [selector] )	선택된 요소에 부모 노드 요소중에 가장 가까운 요소를 찾음

 

 

1.1 부모 선택자 사용 예시

1.1.1 .parent() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul>
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parent().css("color","red");
</script> 

 

결과값

메뉴 1 2 3 3-1 3-2 4

부모 요소인 ID가 'parentUl2' 요소가 선택된다.

 

 

1.1.2 .parents() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parents().css("color","red");
</script>

 

결과값

메뉴 1 2 3 3-1 3-2 4

 

부모요소들인 ID가 'parentDIV', 'parentLI', 'parentUl2' 요소들이 선택된다.

 

 

1.1.3 .closest( [selector] ) 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").closest("li").css("color","red");
</script> 

결과값

메뉴 1 2 3 3-1 3-2 4

선택된 현재 요소부터 가장가까운 요소를 자기 자신이므로 ID가 selector인 요소를 찾게됩니다.

 

2. 제이쿼리(Jquery) 형제 선택자 함수 표

선택자	예시	설명
.prev( [selector] )	$("#selector").prev() or $("#selector").prev([selector])	1. 매개변수가 있는 경우 선택된 요소에 같은 노드 위치에서 선택된 요소에 이전 요소가 selector와 같은 요소를 찾음   2. 매개변수가 없는 경우 같은 노드 위치에서 선택된 요소에 이전 요소를 찾음
.prevAll( [selector] )	$("#selector").prevAll() or $("#selector").prevAll([selector])	1. 매개변수가 있는 경우 같은 노드 위치에서 선택된 요소에 이전 요소들 중에 selector에 해당하는 요소만 찾음   2. 매개변수가 없는 경우 같은 노드 위치에서 선택된 요소에 이전 요소들을 전부 찾음
.next( [selector] )	$("#selector").next() or $("#selector").next([selector])	1. 매개변수가 있는 경우 같은 노드 위치에서 선택된 요소에 다음 요소가 selector와 같은 요소를 찾음   2. 매개변수가 없는 경우 같은 노드 위치에서 선택된 요소에 다음 요소를 찾음
.nextAll( [selector] )	$("#selector").nextAll() or $("#selector").nextAll([selector])	1. 매개변수가 있는 경우 같은 노드 위치에서 선택된 요소에 다음 요소들 중에 selector에 해당하는 요소만 찾음   2. 매개변수가 없는 경우 같은 노드 위치에서 선택된 요소에 다음 요소들을 전부 찾음
.siblings()	$("#selector").siblings()	.siblings() 같은 노드 위치에서 선택된 요소를 제외한 나머지 요소를 전부 찾음

 

 

2.1 형제 선택자 사용 예시

2.1.1 .prev() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").prev("#prevLI1").css("color","red"); 
</script> 

결과값

메뉴 1 2 3 4 5

선택된 요소에 이전 요소인 ID가 prevLI1이 선택이 되고 selector에 해당하는 아이디가 prevLI1인 요소를 선택하게 됩니다.

 

2.1.2. .prevAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").prevAll("#prevLI2").css("color","red"); 
</script> 

결과값

메뉴 1 2 3 4 5

선택된 요소에 이전 요소 전체 ID값이 prevLI2, prevLI1 인 요소를 찾습니다. 그중에서 ID가 prevLI2인 요소만 찾게 됩니다.

 

 

2.1.3 .next() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").next().css("color","red");
</script> 

결과값

메뉴 1 2 3 4 5

 

선택된 요소에 다음 요소인 ID가 nextLI1 요소가 선택이 됩니다.

 

 

2.1.4 .nextAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").nextAll("#nextLI2").css("color","red");
</script> 

결과값

메뉴 1 2 3 4 5

 

선택된 요소에 다음 요소 전체를 ID가 nextLI1, nextLI2를 찾습니다. 그중에서 ID가 nextLI2인 요소가 선택이 됩니다.

 

 

2.1.5 .siblings() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").siblings().css("color","red");
</script> 

결과값

메뉴 1 2 3 4 5

선택된 요소에 같은 노드에 해당하는 요소들을 전체 선택하게 됩니다.

 

 

3. 제이쿼리(Jquery) 자식 선택자 함수 표

선택자	예시	설명
.children( [selector] )	$("#selector").children() or $("#selector").children([selector])	1. 매개변수가 있는 경우 선택된 요소에서 자식 노드에 해당하는 요소를 찾음   2. 매개변수가 없는 경우 선택된 요소에서 자식 노드에 해당하는 요소를 찾음
.find( [selector] )	$("#selector").find( [selector] )	선택된 요소에서 자식 노에 해당하는 요소들 중  매개변수에 해당하는 요소를 찾음

 

 

3.1 자식 선택자 사용 예시

3.2.1 .children() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").children().css("color","red");
</script>

결과값

메뉴 1 2 2-1 2-2 2-3 2-3-1 2-3-2

 

선택된 요소에 해당하는 자식요소인 ID가 children1 인 요소가 선택이 됩니다.

 

 

3.2.2 .find() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").find("#children4").css("color","red");
</script>

결과값

메뉴 1 2 2-1 2-2 2-3 2-3-1 2-3-2

 

선택된 요소에 자식요소들 중에서 ID가 children4인 요소를 선택하게 됩니다.