jQuery
제이쿼리 jQuery closest(), parant(), siblings(), children()
dev.mk
2018. 3. 3. 20:07
반응형
HTML 예제
|
1
2
3
4
5
6
7
8
9
10
11
|
<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/>
|
cs |
1. parent()
|
1
2
3
4
5
|
$(document).on("click","#me",function(){
$(this).parent().css("background-color","red");
});
|
cs |
결과 : grandmom , mom의 div색이 red로 변경됨.
parent() 함수는 부모들을 호출한다. grandmom만 호출하려면 $(this).parent().parent()로 호출하는 법이 있지만
index로 호출하는 eq() 함수가 있다. $(this).parent().eq(2); 이렇게 하면 2번째 상위의 parent 요소가 선택된다.
2. closest()
|
1
2
3
4
5
|
$(document).on("click","#me",function(){
$(this).closest().css("background-color","red");
});
|
cs |
결과 : mom의 div색이 red로 변경됨
closest() 함수는 가장 가까운 부모를 선택한다.
3.1 siblings()
|
1
2
3
4
5
|
$(document).on("click","#me",function(){
$(this).siblings();
});
|
cs |
결과 : brother, sister가 선택 된다.
형제 요소들을 호출한다. 만약 바로 옆에 있는 형제만 선태하고 싶다면 next() 함수를 사용한다,
$(this).next("input") 이렇게 사용하면 brother가 선택된다.
3-2. siblings()
|
1
2
3
4
5
|
$(document).on("click","#me",function(){
$(this).siblings('#sister').after('<button type="button" id="sister_2">시스터2</button>');
});
|
cs |
결과 : a태그 sister 다음에 버튼 태그가 생긴다.
4. children()
결과 : son
직계 자식을 선택한다. son 밑에 grandson이 있지만 이 요소는 선택되지 않는다.
grandson까지 선택하려면 find()를 사용한다. find는 depth에 상관없이 하위 자손들을 모두 선택한다.
jQuery 선택자 에서 자손과 자식은 다른 의미로 사용 된다.
자손 : depth 하위의 자식들도 포괄하고
자식 : 직계자식만을 의미한다.
본문내용의 출처 https://brunch.co.kr/@ourlove/78
반응형