.closest()
원문 링크 
http://api.jquery.com/closest/
함수들
closest( selector )
- .closest( selector )
- closest( selector, [ context ] )
closest( selectors, [ context ] )
- .closest( selectors, [ context ] )
개요 : 선택된 요소의 최초의 부모 요소를 얻을 수 있습니다. 현 시점의 요소에서 시작하여 DOM 트리의 마지막 부분까지 조회합니다.
- .closest( selector )
- selector 선택할 요소를 표현하는 문자열
- .closest( selector, [ context ] )
- selector 선택할 요소를 표현하는 문자열
- context A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
jQuery 객체는 DOM 요소 집합들을 표현할 수 있습니다. .closest() 함수는 DOM 트리에서 그 요소들을 탐색하거나 그 요소들의 부모 요소들을 찾을 수도 있고 일치하는 요소들로 새로운 jQuery 객체를 생성할 수도 있습니다. .parents() 함수와 .closest() 함수는 DOM 트리를 탐색하는 면에서는 유사한 함수입니다. 두 함수 사이에는 아주 미묘하지만 큰 차이점이 존재합니다. 아래 표를 참고하시죠.
| .closest() | .parents() |
|---|---|
| 현재 요소부터 시작 | 부모 요소와 함께 시작 |
| 제공된 선택자와 일치하는 요소를 찾을때까지 DOM 트리를 탐색 | 문서의 root 요소부터 DOM 트리를 탐색하여 각 부모 요소들로 임시 집합을 구성하고 제공된 선택자에 의해 임시 집합에서 추출 |
| 없거나 하나의 요소(zero or one element)를 포함한 jQuery 객체를 반환 | 없거나 하나 이상의 요소(zero, one, or multiple elements)를 포함한 jQuery 객체를 반환 |
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
item A에서 시작하여 <ul> 요소들을 찾는다고 가정한다면 :
$('li.item-a').closest('ul')
.css('background-color', 'red');
이 스크립트는 level-2 <ul> 영역의 색깔을 바꾸게 됩니다. 이 영역은 item-a 기준으로 DOM 트리에서 최초로 만나게 되는 요소입니다.
이번에는 <li> 요소를 찾는다고 가정해 보겠습니다.
$('li.item-a').closest('li')
.css('background-color', 'red');
이 스크립트는 리스트에서 A 부분만 색깔을 바꾸게 됩니다. .closest() 함수는 DOM 트리에서 자기 자신 요소를 포함하여 찾기 시작하기 때문에 A 아이템에서 탐색이 멈추게 됩니다.
직역만 해서는 정확한 의미가 파악이 되지 않더군요. 그래서 일일히 위 코드들로 테스트를 해봤습니다. 이 .closest() 함수는 재미있는 놈입니다. 부모 요소를 찾아주는데 선택된 요소에서 주어진 선택자를 기준으로 가장 가까운 요소를 찾아주는 함수입니다. 위에서 언급한 것처럼 .parent() 함수와 유사하지만 조금 다릅니다. 음~~ .parent() 함수는 항상 부모요소를 찾아주지만 .closest() 함수는 꼭 부모요소만 찾아주는 것은 아닙니다. 더 확장해서 사용할 수 있죠.
사실 closest 라는 단어의 뜻이 '가장 가까운' 이란 뜻이잖아요. 단순히 단어의 뜻만 보셔도 아!! 하실 겁니다. 아닐까요? ㅎㅎ;;
자 이번에는 context 인자를 사용하여 DOM 요소안에서 가장 가까운 요소를 찾는 걸 해보겠습니다.
var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII)
.css('background-color', 'red');
$('li.item-a').closest('#one', listItemII)
.css('background-color', 'green');이번에는 level-2 <ul>의 색이 변하는데, A 아이템 기준으로 첫번째 만나는 <ul> 부모 요소이고 II 아이템의 자손에 해당하기 때문입니다. 반면에 level-1 <ul>의 색은 변하지 않는데, 이것은 #one에 해당하는 요소가 II 아이템의 자손요소에서 벗어난 영역에 있기 때문입니다.
예 제
이벤트가 발생한 곳에서 가장 가까운 li를 찾아 배경색을 토글합니다.
<!DOCTYPE html>
<html>
<head>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("hilight");
});
</script>
</body>
</html>미리보기
각 텍스트 영역을 클릭해 보세요. 위 예제 스크립트는 따로 설명드리지 않아도 되겠죠?
개요 : 현재 위치한 요소에서 DOM 트리를 탐색하여 일치된 선택자들과 요소명을 배열로 반환 받습니다.
- .closest( selectors, [ context ] )
- selectors 일치하는 요소를 표현하기 위한 배열 또는 문자열 표현(jQuery 객체도 가능)
- context A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
이 함수는 주로 내부적으로 사용하거나 플러그인 제작자 용도입니다.
예 제
Show how event delegation can be done with closest.
<!DOCTYPE html>
<html>
<head>
<style></style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul><li></li><li></li></ul>
<script>var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
$("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>
</body>
</html>
미리보기
선택자에 해당하는 요소명을 반환했습니다.
이번 장은 유독 글을 쓰기가 힘들었네요. 환경도 그렇고 함수도 그렇고... ㅎㅎ;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 인덱스로 요소 찾기, eq() (4) | 2011.05.02 |
|---|---|
| jQuery API 정복 - 이전 선택요소로 돌아가기, end() (2) | 2011.04.29 |
| jQuery API 정복 - 선택된 요소만큼 루프, each() (4) | 2011.04.28 |
| jQuery API 정복 - 텍스트 노드를 포함한 자식요소 가져오기, contents() (4) | 2011.04.26 |
| jQuery API 정복 - 자식 요소들 찾기, children() (2) | 2011.04.07 |
| jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() (6) | 2011.03.24 |
| jQuery API 정복 - 선택요소 확장하기, add() (2) | 2011.03.21 |
| jQuery API 정복 - 폼의 value 가져오기, val() (4) | 2011.03.17 |