[JQuery] closest(), parant(), siblings(), children()

JQuery에는 선택함수가 여러개 있다. closest(), parant(), siblings(), children()가 사용되는 방법에 대해 알아볼것이다. 

$(this)는 #me를 기준으로 하겠다. 

 

<div id="grandmom">
	<div id="mom">
    	<div id="me">
        	<div id="son">
            	<div id="grandson"></div>
            </div>
        </div>    
            <input type="text" id="brother"/>
            <a id="sister"/>
    </div>
</div>

---

 

1.parent()

$(document).on("click","#me", function(){
	$(this).parent().css("background-color", "red");
 });

 

==> grandmom, mom 의 div 색이 red로  변경

부모들을 호출한다. 만약 grandmom만 호출하고자 한다면 $(this).parent().parent()로 호출하는 방법이 있다.

---

2.closest()

$(document).on("click","#me",function(){
	$(this).closest().css("background","red");
    });

 

==>mom의 div 색이 red로 변경됨

가장 가까운 부모를 선택한다. 

 

---

3.1 siblings()

$(document).on("click",function(){
	$(this).sibling();
    
});

==>brother, sister이 선택된다.

형제 요소들을 호출한다. 

 

만약 바로 옆 형제만 선택하고 싶다면 next()함수를 사용한다.

$(this).next("input") 

==> brother

 

3.2 siblings()

$(document).on("click", "#me", function(){
	$(this).siblings(#sister).after('<button type="button" id="sister_2"> 시스터2</button>')
});

==>a태그 sister 다음에 버튼 태그가 생긴다.

 

---

 

4.children()

 

$(document).on("click",function(){
	$(this).children();
    
});

 

==>son

직계자식을 선택한다.  son아래 grandson도 있지만 이 요소는 선택되지 않는다. 

grandson까지 찾고자 할때는 find()함수를 사용하면 된다 .

( 아래 참고 )

2022.08.18 - [Front/JQuery] - find/ td:eq(0)/ not /closest/ toFixed 요소 찾기

 

find는 depth에 상관없이 하위 자손들을 모두 선택하며 jQuery에서는 자손과 자식은 다른의미로 쓰이고 있다.

자손: depth 하위의 자식들도 포관

자식: 직계자식만을 의미한다.