Jquery - 인접 관계 선택자

*부모 요소 선택자 - parent( )

// 부모 요소 선택자

$(function(){
    $("요소").parent.css("속성명", "값");
});


ex)
<ul> // 부모
     <li id="list_1> 자식1 </li>
     <li> 자식2 </li>
</ul>

$(function(){
    $("#list_1").parent.css("background-color", "red");
});


요소로 list_1의 id를 가진 li에 parent()를 써서 li의 부모요소
즉 ul이 선택 됨.

ul의 배경색이 빨간색이 된다.

 

 

*하위 요소 선택자

※요소와 요소 사이에 공백이 있어야함 $("요소1 |공백한칸| 요소2")

// 하위 요소 선택자

$(function(){
    $("기준 요소 선택1 요소선택2").css("속성명", "값");
});

※기준요소와 요소선택 사이에 공백이 들어가야한다.


ex)
html에
<div id="wrap">
	<h1>인접 관계 선택자</h1> <----------------이 h1과
    <p>내용1</p>  
    <section>
    	<h1>하위 요소 선택자</h1>  <--------------이 h1
        <p>내용2</p>
    </section>
</div>


$(function(){
    $("#wrap h1").css("color", "red");
});



기준이 wrap 이고 그 안에 "포함"된 모든 h1이 선택된다.

<h1>인접 관계 선택자</h1>,  <h1>하위 요소 선택자</h1>
두 요소의 글자가 빨간색이 된다.

 

 

*자식 요소 선택자

// 자식 요소 선택자

1. $("요소 선택 > 자식 요소 선택") 
2. $("요소 선택").children("자식 요소 선택")
	// 1번과 2번은 선택한 요소를 기준으로 지정한 자식 요소"만" 선택

3. $(요소 선택").children()
	// 3번은 선택한 요소를 기준으로 "모든" 자식 요소를 선택

---------------------------------------------------------------------


<div id="wrap">
	<h1>이것</h1>   <-----------------  ex1)은 이 것만 바뀜
    <p>내용1</p>
    <section>
    	<h1>자식 요소 선택자</h1>  <---------- ex2)는 section안에 있는
        <p>내용2</p>             <-----------   h1과 p의 내용이 모두 바뀜
    </section>
</div>
---------------------------------------------
ex1)

$(function(){
    $("#wrap > h1").css("color", "red");
});

---------------------------------------------

ex2)

$(function(){
    $("#wrap > section").children().css("color", "red");
});

 

 

*형(prev( )), 동생(next( )) 요소 선택자

// 형 동생 요소 선택자

$("요소").prev().css("속성명", "값");  선택요소의 앞의 요소 (형)
$("요소").next().css("속성명", "값");  선택요소의 뒤의 요소 (동생)


ex)
html에

<h1>aaaa</h1>
<p>1</p>
<p>2</p>    <---------------prev()
<p id="txt>3</p>   <--------기준
<p>4</p>    <---------------next()
<p>5</p>
-----------------------------------

ex1)
$("#txt").prev().css("color", "red");

id txt를 가진 p(3번째)를 기준으로 prev 이전
즉 두번째 p가 선택된다.
<p>2</p>에 적힌 2가 빨간색이 됨
-----------------------------------

ex2)
$("#txt").next().css("color", "blue");

id txt를 가진 p(3번째)를 기준으로 next 다음
즉 네번째 p가 선택된다.
<p>4</p>에 적힌 4가 파란색이 됨

 

 

*전체 형(prevAll( )), 동생(nextAll( )) 요소 선택자

// 전체 형 동생 요소 선택자

$("요소").prevAll().css("속성명", "값");  선택요소의 앞의 모든 형 요소 
$("요소").nextAll().css("속성명", "값");  선택요소의 뒤의 모든 동생 요소 


ex)
html에

<h1>aaaa</h1>  <---------------prevAll()
<p>1</p>       <---------------prevAll()
<p>2</p>       <---------------prevAll()
<p id="txt>3</p>   <--------기준
<p>4</p>       <---------------nextAll()
<p>5</p>       <---------------nextAll()
-----------------------------------

ex1)
$("#txt").prevAll().css("color", "red");

id txt를 가진 p(3번째)를 기준으로 prevAll 이전의 모두
즉 txt 위쪽의 h1부터 p1, p2가 모두 선택된다.
h1부터 p1, p2에 적힌 aaaa, 1, 2가 빨간색이 됨
-----------------------------------

ex2)
$("#txt").nextAll().css("color", "blue");

id txt를 가진 p(3번째)를 기준으로 nextAll 다음의 모두
즉 txt 아래의 p4, p5가 모두 선택된다.
p4, p5에 적힌 4, 5가 파란색이 됨

 

*전체 형제 요소 선택자 - siblings( )

// 전체 형제 요소 선택자

$("요소 선택").siblings().css(style_1);



ex)

<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p>내용6</p>

$(".txt3").siblings().css("color", "red");

클래스명 txt3을 가진 p요소를 기준으로
모든 형제들이 선택된다.

단, 처음 지정된 txt3은 선택되지 않음


결과

내용1, 내용2, 내용4, ,내용5 ,내용6 이 모두 빨간색으로 된다.

내용3은 선택되지 않음.

 

 

*범위 제한 전체 형(prevUntil( ))/ 동생(nextUntil( )) 요소 선택자

범위 제한 전체 형(prevUntil( ))/ 동생(nextUntil( )) 요소 선택자 

$("요소 선택").prevUntil("범위 제한 요소 선택").css("속성명","값");
$("요소 선택").nextUntil("범위 제한 요소 선택").css("속성명","값");


ex)
html에
<h1 class="title">인접 관계 선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
---------------------------------

ex1)

$(".txt3").prevUntil(".title").css("color", "red");

클래스명 txt3과 클래스명 title 사이에 있는 요소만 선택

결과
내용1과 내용2가 빨간색으로 된다.
---------------------------------

ex2)

$(".txt3").prevUntil(".txt6").css("color", "blue");

클래스명 txt3과 클래스명 txt6 사이에 있는 요소만 선택

결과
내용4과 내용5가 파란색으로 된다.

 

 

*상위 요소 선택자

// 상위 요소 선택자

$("요소 선택").parents()  //선택요소 기준으로 상위 요소를 모두 선택
$("요소 선택").parents("요소선택")  


ex)

html에

<body>
  <h1>선택자</h1>
  <section>
      <div>
          <p class="txt1">내용</p>
      </div>
  </section>
  <section>
      <div>
          <p class="txt2">내용</p>
      </div>
  </section>
</body>

------------------------------------------------------------------------------
ex1)

$(function(){
        $(".txt1").parents().css({
            "border":"2px dashed #00f",
            "color":"red"
        });      
});


클래스txt1의 상위 모든 요소가 선택된다
즉 txt1의 부모 div 의 부모 section 의 형제 h1 의 부모 body의 부모 html 이 선택됨

두번째 section안의 p에도 color는 적용됨 (body에서 상속함)(border는 상속 불가임)

------------------------------------------------------------------------------
ex2)

$(function(){        
        $(".txt2").parents("div").css({
            "border":"2px solid red",
            "color":"green"
        });
});

클래스 txt2의 부모를 div로 한정 지으면 
<section>
	<div>
		<p class="txt2">내용</p>
	</div>
</section>

에서 div 와 p에만 적용

 

 

 

*가장 가까운 상위 요소 선택자 - closest( )

// 가장 가까운 상위 요소 선택자

$("요소 선택").closest("요소 선택")


ex)
html에

<h1 class="title">선택자</h1>
<div>
  <div>
  	<p class="txt1">내용</p>
  </div>
</div>


$(function(){
	$(".txt1").closest("div").css({"border": "2px solid #f00"});
});


결과
클래스 txt1의 p 요소의 가장 가까운 상위요소
즉 p의 부모 div 요소가 선택이 된다

div에 2픽셀의 빨간색 테두리 선이 만들어짐