jQuery Selector (3) 인접관계 선택자

직접 선택자로 한 엘리먼트 대상을 잡고 뒤에 메서드로 선택한 요소의 인접 요소들을 가져오는 방법

여기서 인접 요소들이란 부모,형제,자식 요소 등을 포함한다.

1. 부모,자식,형제 요소의 이해

일반적인 가계도

우리 실생활과 같이 조부모는 할아버지,할머니 부모는 아버지,어머니 자식은 본인을 포함한 형제 자매가 된다. 이를 HTML 의 요소 세계에도 그대로 적용한 것이 부모,형제,자식 요소이다.

<ul>
  <li>인접 선택자 1
    <ul>
      <li>인접 선택자 2</li>
      <li>인접 선택자 3</li>
      <li>인접 선택자 4</li>
    </ul>
  </li>
  <li> 인접 선택자 5
    <ul>
      <li>인접 선택자 6</li>
      <li>인접 선택자 7</li>
      <li>인접 선택자 8</li>
    </ul>
  </li>
</ul>

이 코드에서 인접선택자 1은 인접선택자 2,3,4의 조부모가 되는거고 2 번째줄＜li ＞안의 ＜ul＞은 인접선택자 2,3,4의 부모가 되는거다.

2. 인접 관계 선택자의 종류

순번	선택자 종류	설명	사용법
1	부모 요소 선택자	선택한 요소의 부모를 선택한다.	$('요소').parent()
2	상위 요소 선택자	선택한 요소의 상위 요소를 선택한다. 여기서 상위 요소란, 부모 보다 더 상위에 있는 요소들을 뜻 한다.	$('요소').parents()
3	자식 요소 선택자	선택한 "요소" 아래의 지정한 "자식 요소" 를 선택한다.	$('요소' > '자식 요소')
4	자식 요소들 선택자	선택한 요소의 모든 자식 요소를 선택한다.	$('요소').children()
5	이전 요소 선택자	선택한 요소의 이전 요소를 선택한다. 형제 관계에만 사용되므로, 형 요소 선택자라고도 한다.	$('요소').prev()
6	이전 요소들 선택자	선택한 요소 이전의 모든 요소를 선택한다.	$('요소').prevAll()
7	다음 요소 선택자	선택한 요소의 다음 요소를 선택한다. 형제 관계에만 사용되므로, 동생 요소 선택자라고도 한다.	$('요소').next()
8	다음 요소들 선택자	선택한 요소 다음의 모든 요소를 선택한다.	$('요소').nextAll()
9	전체 형제 요소들 선택자	지정한 요소의 형제 요소모두를 선택한다. (자기 자신은 포함되지 않는다.)	$('요소').siblings()

3. 예제

주 사용 태그는 목록 태그인 ＜ul＞,＜li＞이다. temp_main이라는 클래스를 사용하는 최상위 ＜ul＞태그안에 각각 ＜li＞,＜ul＞ 자식들이 있다.

• 부모 요소 선택자
  선택한 요소의 부모 요소를 가지고 온다.

$('선택자').parent();

 $('.temp3').parent().css('color','red');

.parent() 메서드는 무조건 자기부모만 선택된다. 인자안에 부모보다 더 상위 부모를 넣으면 적용되지 않는다. $('temp3')의 형제들까지 모두 color가 변한이유는 css의 color속성을 부모로부터 상속받기 때문이다.

• 상위 요소 선택자
  선택한 요소의 상위 요소를 가지고 온다.

$('선택자').parents();

$('.temp3').parents().css('color','red');

.parents() 안에 인자를 안넣게 되면 모든 조상을 다 선택한다.
.parents() 안에 인자를 넣으면 조상 요소중 인자값을 선택하게 된다.

• 자식 요소 선택자 (1)
  선택한 요소의 자식 요소를 가지고 온다.
  CSS방식처럼 사용하면 된다.

$('부모요소 > 자식요소')

$('.temp_sub1 > .temp2').css({backgroundColor : 'yellow'});

• 자식 요소 선택자 (2)
  선택한 요소의 모든 자식요소들을 가지고 오거나, 특정 자식 요소만 선택해서 가지고 올 때 사용한다.

$("요소").children()
$("요소").children("자식 요소명")

$('.temp_sub1').children('.temp2').css({backgroundColor : 'yellow'});

.children() 무조건 직계 자식요소를 선택.
.children() 안에 인자를 넣게되면

$('부모요소').children('직계자식요소') 

직계 특정한 자식만 선택

• 이전 요소 선택자
  선택한 요소의 이전 요소를 선택한다.
  여기서의 이전 요소는 '부모-자식'간에는 성립하지 않고 오직 형제 요소 간에만 성립한다. 누가 형이냐 동생이냐는 순서에 의해 정해지므로,이전 요소 선택자는 '형 요소 선택자'라고도 한다.

$("요소").prev()

<ul>
  <li>인접 선택자 1
    <ul>
      <li>인접 선택자 2</li>
      <li>인접 선택자 3</li>
      <li>인접 선택자 4</li>
    </ul>
  </li>
  <li> 인접 선택자 5
    <ul>
      <li>인접 선택자 6</li>
      <li>인접 선택자 7</li>
      <li>인접 선택자 8</li>
    </ul>
  </li>
</ul>

여기서 인접 선택자 2의 이전요소라고 해서 .prev()를 쓰게되면 ＜ul＞인데 부모와 자식간은 .prev() 사용을 못 하기때문에 오류이다.

$('.temp2').prev().css({backgroundColor : 'yellow'});

• 다음 요소 선택자
  선택한 요소의 다음 요소들을 선택한다.
  이전 요소 선택자와 선택 방향만 다를 뿐 기능이 거의 동일하다.
  이전 요소 선택자가 형 요소 선택자였다면, 다음 요소 선택자는 동생 요소 선택자이다.
  역시 부모 요소를 뛰어넘는 scope에는 적용되지 못하며, 형제 요소들끼리만 유효하다.

$("요소").next()

$('.temp2').prev().css({backgroundColor : 'yellow'});

prevAll(),prevUntil(),nextAll(),nextUntil()은 잘 쓰지않아 패스한다.

• 전체 형제 요소들 선택자
  선택한 요소들의 형제들을 모두 가져오거나,일부 형제 요소만 선택하여 가져올 수 있는 선택자다. 선택한 요소 자기자신은 선택 범위에서 빠지게 된다.
  이름부터 '전체 형제 요소들 선택자' 이므로, 역시 같은 부모 요소 하위 형제 요소들끼리만 사용가능하다.

$("요소").siblings()

$('.temp2').siblings().css('color','red');
// 이 경우 .temp2를 제외한 모든 형제들을 선택
$('.temp2').siblings('.temp3').css('color','red');
// 이경우 .temp2를 제외한 .temp3만 선택된다.

$('.temp2').siblings().css('color','red');

$('.temp2').siblings('.temp3').css('color','red');