.parents()
원문 링크 
http://api.jquery.com/parents/
개요 : 선택자에 의해 걸러진 요소집합의 각 요소들의 부모요소들을 찾습니다.
- .parents( [selector] )
- selector 선택자 문자열 표현
.parent() 함수는 DOM 트리를 구성하는 요소들의 부모들을 찾아서 새로운 jQuery 객체 집합을 구성해 줍니다. 객체 집합은 추가되는 순서에 따라 인덱스가 부여됩니다. 부모요소가 반환되는 기준은 현재 요소에서 가까운 요소부터 먼 요소 순으로 반환됩니다. .parents() 와 .parent() 는 비슷하비만 DOM 의 깊이가 단일이냐 그 이상이냐의 차이가 있습니다.
이 함수에는 옵션으로 선택자를 인자로 넣을 수 있습니다. 또한 $() 와 같은 함수도 인자로 사용할 수 있습니다. 만약 인자를 세팅하면 그에 맞는 필터 작업이 이루어집니다.
아래의 예를 한번 보시죠.
<ul class="level-1">
<li class="item-i">I</li>
<li 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 에서 시작하여 부모요소들을 찾을 수 있습니다.
$('li.item-a').parents().css('background-color', 'red');
스크립트의 결과는 level-2, item II, level-1 목록들을 빨간색으로 바꿔줍니다. (사실 <html> 요소까지 올라갑니다). 선택자를 인자로 주지 않았기 때문에, 모든 부모요소들이 객체로 만들어 집니다. 만약 선택자를 넣으면 그에 맞게 필터되어 결과집합에 포함되게 됩니다.
이쯤되면 parent() 함수 복사&붙여넣기로 만든거 다들 눈치 채셨죠? ^^;;;;
예 제
b 요소의 모든 부모요소들을 찾습니다.
<!DOCTYPE html>
<html>
<head>
<style>
b, span, p, html body {
padding: .5em;
border: 1px solid;
}
b { color:blue; }
strong { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<p>
<span>
<b>My parents are: </b>
</span>
</p>
</div>
<script>
var parentEls = $("b").parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>
</body>
</html>미리보기
b 요소의 부모요소들을 찾아서 태그명들을 map()함수를 사용해 배열로 바꿔줬습니다. 콤마 연산자로 문자열로 변환한뒤 텍스트를 뿌리는 스크립트입니다. 재미있는 스크립트네요.
예 제
클릭된 span의 유일한 div 부모요소의 개수를 세어줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p, div, span {margin:2px; padding:1px; }
div { border:2px white solid; }
span { cursor:pointer; font-size:12px; }
.selected { color:blue; }
b { color:red; display:block; font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<div>
<div><span>Hello</span></div>
<span>Hello Again</span>
</div>
<div>
<span>And Hello Again</span>
</div>
</p>
<b>Click Hellos to toggle their parents.</b>
<script>
function showParents() {
$("div").css("border-color", "white");
var len = $("span.selected")
.parents("div")
.css("border", "2px red solid")
.length;
$("b").text("Unique div parents: " + len);
}
$("span").click(function () {
$(this).toggleClass("selected");
showParents();
});</script>
</body>
</html>
미리보기
텍스트들을 클릭하시면 그 요소에 해당하는 부모요소들의 개수를 세어줍니다.
부모들을 찾는다는 것은 부모, 조부모 처럼 위 조상들을 계속 찾아 올라가는 것입니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 이전 요소 찾기, prev() (0) | 2011.07.05 |
|---|---|
| jQuery API 정복 - 특정 조건을 만날 때까지 이전 요소들을 쭈욱, prevUntil() (0) | 2011.06.30 |
| jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil() (0) | 2011.06.29 |
| jQuery API 정복 - position으로 부모 찾기, offsetParent() (0) | 2011.06.29 |
| jQuery API 정복 - 부모 찾기, parent() (0) | 2011.06.28 |
| jQuery API 정복 - ~가 아닌 것, not() (4) | 2011.06.27 |
| jQuery API 정복 - 조건이 맞을 때까지 쭈욱, nextUntil() (0) | 2011.06.22 |
| jQuery API 정복 - 현재 요소의 다음 요소 모두, nextAll() (0) | 2011.06.21 |