.has()
원문 링크 
http://api.jquery.com/has/
개요 : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지 확인하여 범위를 축소합니다.
- .has( selector )
- selector 요소를 찾을 수 있는 선택자 문자열
- .has( contained )
- contained 요소를 찾을 수 있는 DOM 요소
.has() 함수를 사용하면 요소 집합의 범위를 축소할 수 있습니다. 주어지는 선택자에 대해 선택될 요소가 있는지 자식 요소들을 탐색하여 새로운 jQuery 집합을 생성해 냅니다.(앞쪽부터 계속 반복적인 내용이 나오네요.)
아래 마크업을 먼저 보시기 바랍니다.
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>위 html 구조에 아래 스크립트를 적용시켜 보겠습니다.
$('li').has('ul').css('background-color', 'red');적용시킨 결과는 item 2와 그 아래 자식요소들의 배경색이 빨간색으로 바뀌게 됩니다. 이유는 item 2가 li이면서 하위 요소로 ul을 지니고 있기 때문입니다.
예 제
자식 요소가 있는 확인해서 효과를 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.full { border: 1px solid red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul><li>Does the UL contain an LI?</li></ul>
<script>
$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
$("ul").has("li").addClass("full");
</script>
</body>
</html>
미리보기
후~ 가끔 보면 예제를 좀 쓸데없이 꽈배기 마냥 꼬아 놓아서 거시기하곤 합니다. 뭐 가끔요 ;;;
스크립트를 보시면 ul에 append로 태그를 추가하고 있습니다. li를 추가하고 있는데요. 추가하는 내용이 만약 li가 존재한다면 'Yes'를 아니라면 'No'를 텍스트 노드로 갖는 li를 추가하고 있습니다. 그 다음 줄에서는 addClass로 'full'이라는 스타일시트를 적용하고 있네요. 별거 아닌데 진짜 예제를 위한 예제이네요. 내부에 has() 함수가 사용되는 방법을 잘 살펴 보세요. 실제로 이렇게 쓰이지는 않겠지만요.
그나마 짧아서 다행입니다. 하기사 이 예제를 만든 친구들도 무지 고민했을거 같습니다. 이걸로는 어떤 예제를 만드나 하고요. :-)
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 현재 요소의 바로 다음 요소, next() (2) | 2011.06.09 |
|---|---|
| jQuery API 정복 - 결과를 배열로 돌려받기, map() (7) | 2011.06.08 |
| jQuery API 정복 - 마지막 요소 찾기, last() (0) | 2011.05.31 |
| jQuery API 정복 - 맞는지 확인하기, is() (6) | 2011.05.30 |
| jQuery API 정복 - 첫번째 요소 찾기, first() (2) | 2011.05.24 |
| jQuery API 정복 - 하위 요소 전부 찾기, find() (2) | 2011.05.19 |
| jQuery API 정복 - 선택 요소 집합에서 추출하기, filter() (8) | 2011.05.12 |
| jQuery API 정복 - 인덱스로 요소 찾기, eq() (4) | 2011.05.02 |