.parent()
원문 링크 
http://api.jquery.com/parent/
개요 : 선택자에 의해 걸러진 요소집합의 각 요소들의 부모요소를 찾습니다.
- .attr( attributeName )
- selector 선택자 문자열 표현
.parent() 함수는 DOM 트리를 구성하는 요소들의 부모들을 찾아서 새로운 jQuery 객체 집합을 구성해 줍니다. .parents() 와 .parent() 는 비슷하비만 DOM 의 깊이가 단일이냐 그 이상이냐의 차이가 있습니다.
s가 붙으면 복수형!! 다들 아시죠?? :-)
이 함수에는 옵션으로 선택자를 인자로 넣을 수 있습니다. 또한 $() 와 같은 함수도 인자로 사용할 수 있습니다. 만약 인자를 세팅하면 그에 맞는 필터 작업이 이루어집니다.
아래의 예를 한번 보시죠.
<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').parent().css('background-color', 'red'); 스크립트의 결과는 level-2 목록의 배경색을 빨간색으로 바꿔줍니다. 선택자를 인자로 주지 않았기 때문에, 모든 부모요소들이 객체로 만들어 집니다. 만약 선택자를 넣으면 그에 맞게 필터되어 결과집합에 포함되게 됩니다.
말이 어려워서 그렇지 함수에 인자를 넣으면 그에 맞게 걸러져서 결과가 반환된다는 지극히 당연한 내용입니다. 긴장하지 마세요~~.
예 제
(parent > child) 형태로 요소들을 표현해 줍니다. 필히 html 소스를 확인하시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div,p { margin:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>div,
<span>span, </span>
<b>b </b>
</div>
<p>p,
<span>span,
<em>em </em>
</span>
</p>
<div>div,
<strong>strong,
<span>span, </span>
<em>em,
<b>b, </b>
</em>
</strong>
<b>b </b>
</div>
<script>
$("*", document.body).each(function () {
var parentTag = $(this).parent().get(0).tagName;
$(this).prepend(document.createTextNode(parentTag + " > "));
});
</script>
</body>
</html>미리보기
스크립트를 보시죠. body 요소부터 시작해서 DOM을 모두 읽으면서 부모 < 자식으로 표현해 주고 있습니다. each()함수를 이용해서 요소들을 읽고 있습니다. 사실 테스트용입니다. 실제로 적용하실때 body에 속한 요소들을 실제로 읽으려 하심 안됩니다.
예 제
p 태그의 부모요소가 class="selected" 의 속성을 가진것을 찾습니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
<script>$("p").parent(".selected").css("background", "yellow");</script>
</body>
</html>미리보기
div가 p의 부모고 class='selected'이어서 색깔 바뀌었습니다. 컴퓨터는 거짓말을 하지 않습니다.
부모 요소를 찾는 함수는 아주 명확한 함수명입니다. 굳이 기억하지 않으려 해도 말이죠.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 특정 조건을 만날 때까지 이전 요소들을 쭈욱, prevUntil() (0) | 2011.06.30 |
|---|---|
| jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil() (0) | 2011.06.29 |
| jQuery API 정복 - position으로 부모 찾기, offsetParent() (0) | 2011.06.29 |
| jQuery API 정복 - 부모들 찾기, parents() (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 |
| jQuery API 정복 - 현재 요소의 바로 다음 요소, next() (2) | 2011.06.09 |