안녕하세요.
빅한입니다.
오늘은 지난 자식 필터에 이어서 내용 필터에 관하여 살펴보도록 하겠습니다.
Content Filter는 선택된 요소의 내용을 기준으로 필터하는 것이라 보면 됩니다.
즉 해당 태그의 text요소를 필터합니다.
예를 하나 들어보면
<span>내용입니다.</span>위의 샘플에서 span이라는 태그에서 "내용입니다."라는 것에 대해서 특정 문자가 있는지, 아무 글자도 없는지, 특정 요소가 있는지, 자식노드가 있는지를 보고 조건에 맞는 요소를 선택하는 것이라 생각하시면 됩니다.
종류
종류에는 4가지 종류가 있습니다.
- :contains(text) - 지정된 텍스트를 포함하는 모든 요소를 선택
- :empty - 텍스트 노드를 포함하여 자식이 없는 요소를 모든 요소를 선택
- :has(selector) - 지정한 선택자와 일치하는 요소를 하나 이상 포함하는 요소를 선택
- :parent - 텍스트 노드를 포함하여 하나 이상의 하위 노드를 가지고 있는 모든 요소를 선택
예제소스
폴더구조는 다음과 같습니다.
+ root
+ lib
- jquery.js
+ selector
- selector_content_filter.html
- selector_content_filter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/jquery.js"></script>
<style>
table div{
padding: 10px;
width: 100px;
}
div{
border: 1px solid blue;
}
table button{
margin: 5px;
padding: 10px;
display: block;
}
.bg-red {
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>1.안녕, 동수야</div>
<div><p></p></div>
<div>3.안녕, 영희야</div>
<div>4.Apple11 Max</div>
<div><p>5.count max</p></div>
<div></div>
<div>7.Hello, max</div>
</td>
<td>
<button type="button" id="btn01">:contains(str)</button>
<button type="button" id="btn02">:empty</button>
<button type="button" id="btn03">:has(selector)</button>
<button type="button" id="btn04">:parent</button>
</td>
</tr>
</table>
<script>
$(function () {
$('#btn01').click(function(e){
$('div').removeClass('bg-red');
$('div:contains(max)').addClass('bg-red');
});
$('#btn02').click(function(e){
$('div').removeClass('bg-red');
$('div:empty').addClass('bg-red');
});
$('#btn03').click(function(e){
$('div').removeClass('bg-red');
$('div:has(p)').addClass('bg-red');
});
$('#btn04').click(function(e){
$('div').removeClass('bg-red');
$('div:parent').addClass('bg-red');
});
})
</script>
</body>
</html>부가적으로 css를 설명하면
div와 button에 간격을 두었으며 div같은 경우는 보다 확인하기 쉽게 테두리를 1px의 파란색의 실선을 표시해 두었습니다.
그리고 클래스를 주어짐에 따라 배경이 붉은색으로 변경되도록 bg-red라는 클래스는 만들었습니다.
예제설명
위의 샘플 소스를 토대로 종류순을 정리하겠습니다.
:contains(text)
버튼 1의 이벤트 안의 내용을 보면 다음과 같은 내용이 있습니다.
$('div:contains(max)').addClass('bg-red');contains 말 그대로 "포함한다"라는 의미가 있습니다.
즉 'max'라는 텍스트를 포함하는 모든 요소를 선택하게 됩니다.
1번 버튼을 클릭하시거나 console에 입력하게 되면 다음과 같은 결과를 볼수 있습니다.
결과를 보시면 <div> 요소의 하위 노드에 'max'라는 텍스트가 있는 요소만 선택된 것을 확인 할수 있습니다.
:empty
버튼 2의 이벤트 안의 내용을 보면 다음과 같은 내용이 있습니다.
$('div:empty').addClass('bg-red');empty. 텅빈이라는 뜻은 가진 이 필터는 해당 요소의 하위 노드가 아무것도 없는 것을 말합니다.
위의 스크립트를 console에 입력하거나 2번 버튼을 클릭하게 되면 다음과 같은 결과를 볼 수 있습니다.
결과를 보시면 6번째 <div>만 선택된 것을 알수 있습니다.
2번째 div가 선택되지 않은 이유는 <div>요소 안에 내용은 없지만 <p>요소가 존재하기 때문에 선택되지 않은 것입니다.
즉 :empty 필터는 그 안에 그 어떤 노드도 없어야 선택되어지는 것을 알수 있습니다.
:has(p)
버튼 3의 이벤트 안의 내용을 보면 다음과 같은 내용이 있습니다.
$('div:has(p)').addClass('bg-red');스크립트에서 has란 단어가 들어가면 존재유무를 확인하는 것이 대다수 인데요.
여기서도 유사한 결과를 볼수 있습니다.
간단한게 설명하면 해당 선택자(has(요기 선택자))가 해당 요소에 포함되어 있는 요소를 선택하는 건데요.
결과를 보면 이렇습니다.
해당 <div>요소 안에 <p>요소가 있는 <div>가 선택되어진것을 알수 있습니다.
:parent
버튼 4의 이벤트 안의 내용을 보면 다음과 같은 내용이 있습니다.
$('div:parent').addClass('bg-red');parent. 부모라는 뜻을 가진 이 필터는 empty와는 정반대로 단 한개의 하위 노드(텍스트포함)을 가지고 있다면 선택되어 집니다.
다르게 말하면 하위 노드가 텅빈(아무것도 없는) 요소를 제외하고 선택하는 것과 동일합니다.
부모라는 뜻과 연관시킨다면 선택한 요소가 자식이 없다면 부모가 될수 없겠죠?
반대로 하위 노드가 있다는 것은 자신은 부모 요소가 될 자격이 있다는 뜻이 되겠죠.
아무튼 결과를 보면 다음과 같습니다.
보시는 바와 같이 :empty와는 정반대의 결과를 보실수 있습니다.
정리
지금까지 content filter에 대해서 살펴봤는데요.
오늘은 그렇게 많지 않아서 간단하게 끝낼수 있었네요.
여러분들의 댓글은 저의 큰 힘이 됩니다.
궁금한 것이나 알고 싶은것이 있다면 제가 아는 지식이 없더라도
함께 고민하도록 하겠습니다.
감사합니다.
'Development > JavaScript' 카테고리의 다른 글
| [jQuery] Visibility Filter(가시성 필터) (0) | 2019.12.10 |
|---|---|
| [jQuery] 형식 선택자 (Form) (0) | 2019.12.10 |
| [jQuery] 자식 필터 선택자(Child Filter) (0) | 2019.09.01 |
| [jQuery] 기본 필터 선택자(Basic Filter) (0) | 2019.06.30 |
| [jQuery] 속성 지시자(Attribute Selector) (0) | 2019.05.26 |
