:empty 는 해당 요소의 텍스트가 없을 때 선택되어 집니다. 괜히 표현만 어렵습니다. 백문이 불여일견~
원문 링크 
http://api.jquery.com/empty-selector/
- jQuery(':empty')
jQuery.com 에는 이렇게 되어 있습니다. 이 선택자는 :parent 와는 반대입니다. 한가지 중요한 것은 :empty 나 :parent 선택자가 텍스트 노드까지도 자식 요소로 여긴다는 것입니다.
W3C 에 따르면 <P> 태그는 비록 그 요소가 텍스트(text)여도 반드시 하나의 자식 요소를 포함해야 합니다.(참고 : http://www.w3.org/TR/html401/struct/text.html#edef-P). 반면에 어떤 태그들은 자식요소가 없어도 됩니다. input, img, br, hr 과 같은 태그들 말입니다.
이렇게 되어 있는데요. 영어 실력이 딸려서 정확하게 무슨 뜻인지는 모르겠습니다. 그런데 여기서 말하고자 하는 것은 :empty 나 :parent 선택자가 텍스트 노드(text nodes)도 요소(element)로 생각한다는 것이죠. 즉, 태그 안에 텍스트가 들어 있으면 그 요소는 :empty 선택자에 의해서 선택이 제외된다는 뜻인거 같습니다. 맞을까요? ^^;;
예 제
자식요소가 없는 td 를 찾아서 'Was empty!' 라는 텍스트를 적어 넣습니다.
<!DOCTYPE html>
<html>
<head>
<style>
td { text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<table border="1">
<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>
<tr><td></td><td>TD#5</td></tr>
</table>
<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>
</body>
</html>
미리보기
여기서 한가지 중요한 것은 <td></td> 와 <td> </td>(공백이 있음) 은 다릅니다. 즉 공백도 text 로 인식하여 자식요소가 있다고 판단하는 것이죠. 엔터키 또한 마찬가지 입니다. 어~ 텍스트 없는데 왜 빈 것으로 인식안해 라고 하심 안됩니다.~~
이 선택자의 사용법은 막상 사용할 때 혼란이 좀 올 수 있겠네요. '아우 왜~ 문자가 없는데 이게 선택이 안되지'라고 말이죠. 그럴때는 꼭 공백이나 엔터키가 들어가 있는지 확인해 보시는게 좋겠네요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 안보이는 요소 찾기 : jQuery(':hidden') (1) | 2011.02.10 |
|---|---|
| jQuery API 정복 - 제목 태그(h1)를 찾자 : jQuery(':header') (8) | 2011.02.09 |
| jQuery API 정복 - 자식 중에 태그 찾기 : jQuery(':has(selector)') (30) | 2011.02.09 |
| jQuery API 정복 - 속성이 있는지 찾기 : jQuery('[attribute]') (10) | 2011.02.08 |
| jQuery API 정복 - 요소명(태그)으로 찾기 : jQuery('element') (0) | 2011.02.07 |
| jQuery 1.5 버젼이 나왔습니다!! (8) | 2011.02.07 |
| jQuery API 정복 - ~보다 작은 요소 선택하기 : jQuery(':lt(index)') (7) | 2011.02.07 |
| jQuery API 정복 - ~보다 큰 요소 선택하기 : jQuery(':gt(index)') (3) | 2011.02.01 |
