1. Description
자식Element를 가지고 있지 않은 모든 Element들을 찾는다. 이것은 :parent와는 정반대의 Selector이다.
자식에는 text노드도 포함된다(즉, 태그 내용에 문자열이 들어가 있으면 자식Element라고 인정하는 것이다).
자식노드가 없는 태그들은 다음과 같은 것들이 있다.
<input>, <img>, <br>, <hr>
2. Example
#1버튼을 클릭하면 자식Element가 비어 있는 Element들을 찾아서, [empty]라는 텍스트를 삽입하고 배경색을 gray로 변경한다. 버튼을 클릭할 때마다 해당 기능을 토글시킨다.
Which are empty tags below?
- Empty Not!
Empty Not!
Empty Not!
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/empty</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1">
<h4>Which are empty tags below?</h4>
<ul>
<li></li>
<li>Empty Not!</li>
<li></li>
<li></li>
</ul>
<p></p>
<p>Empty Not!</p>
<p></p>
<p>Empty Not!</p>
<p></p>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-find">#1. Click Me</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnFind = $("[name='btn-find']");
var clickCount = 1;
btnFind.click(function() {
const filters = [ "[style]", ":empty" ];
const filter = filters[(clickCount % 2)];
const emptyTags = $("[name='_1q74-example-1'] " + filter);
emptyTags.each(function(i, el) {
const element = $(el);
if(!element.is("[style]")) {
element.css("background-color", "gray");
element.text("[emtpy]");
} else {
element.removeAttr("style").text("");
}
});
++clickCount;
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
</script>
<style>
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][jquery][selector]empty.html
0.00MB
5. Reference
https://api.jquery.com/empty-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #22】:even Selector (0) | 2023.02.23 |
|---|---|
| 【jQuery/Selector #21】:eq() Selector (0) | 2023.02.23 |
| 【jQuery/Selector #19】:enabled Selector (0) | 2023.02.22 |
| 【jQuery/Selector #18】Element Selector (“element”) (0) | 2023.02.22 |
| 【jQuery/Selector #17】:disabled Selector (0) | 2023.02.22 |