Jquery 형제 선택자 - Jquery hyeongje seontaegja

지난 시간에 이어서 자식/형제요소 및 조합 선택자를 알아보도록 하겠습니다.

• 자식요소 선택자 ( > )

selector로 하나의 요소를 지정한 후 > 선택자를 사용하여 자식요소를 지정할 수 있습니다.  1개의 자식요소가 선택되어 집니다. 

$("#myObject > div");

• 자식요소 선택자(복수)

selector로 하나의 요소를 지정한 후 띄워쓰기 후 해당 선택요소를 지정합니다.

$("#myObject div");

$("#myObject div").eq(0); // div tag 요소 중 첫번째 자식요소

• 형제요소 선택자

지정된 myObject 요소의 형제요소를 선택할때 사용 할 수 있습니다. 

$('#myObject + div'); // #myObject 바로 다음 div를 선택합니다.


$('#myObject ~ div'); // #myObject 형제 div를 모두 선택합니다.
$('#myObject ~ div').eq(1);

• 조합 선택자

지난 시간 및 위에 소개된 선택자를 복합적으로 사용하여 요소를 지정할 수 있습니다. 

아래의 구성요소중 span #2를 찾을 경우 

<div id="myObject">
	<div> 1번 div </div>
    <div> 2번 div </div>
    <div> 
    	<span> span #1 </span>
        <span> span #2 </span>
    </div>
</div>

다음과 같이 구성하여 요소를 선택 할 수 있습니다. 

$("#myObject div span").eq(1)

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

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

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. 인접 관계 선택자의 종류

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');