[jQuery] 필터 선택자 - :parent, :empty, :has, :contains

jQuery

[jQuery] 필터 선택자 - :parent, :empty, :has, :contains

힘없는염소 2016. 10. 27. 13:49

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
    td {width: 40px;height: 40px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
 
<table border="1">
    <tr><td>텍스트1</td><td>텍스트2</td></tr>
    <tr><td>텍스트3</td><td></td></tr>
    <tr><td><span>span</span></td><td><span>span</span></td></tr>
    <tr><td>홍길동</td><td>이순신</td></tr>
</table>
<script>
 
    // jQuery Content Filters
 
    //  자식 노드 (텍스트 노드 포함)를 가지고 있는 (부모인) 요소를 선택
    $( "td:parent" ).css("background", "red");  
 
    // (텍스트 노드 포함) 자식이 없는 요소 선택
    $( "td:empty" ).css("background", "blue");  
 
    // 자식으로 해당 요소를 가지고 있는 요소 선택  // has( selector / DOMElement )
    $( "td:has(span)" ).css("background", "pink");    
 
    // 지정된 텍스트를 포함하는 요소 선택.
    $( "td:contains('길')" ).css("background", "orange");  
 
</script>
 
</body>
</html>

저작자표시 (새창열림)