1. Description
jQuery( ":hidden" ) : 숨겨진 모든 Element들을 찾는다.
다음의 경우 숨겨진 Element로 취급될 수 있다.
- display:none으로 설정된 경우
- input type="hidden"으로 설정된 경우
- width와 height가 0으로 설정된 경우(※ 테스트 결과 :hidden으로 필터링되지 않았다)
- 상위 Element가 hidden으로 설정된 경우
jQuery 1.3.2버전부터 visibility:hidden은 :hidden필터링에서 제외되었다.
jQuery 3버전부터는 <br/>과 같이 Layout을 갖지 않는 Element들은 :hidden필터링에서 제외되었다.
※ 자세한 내용은 「6 Reference」를 참고하세요.
2. Example
#1버튼을 클릭하면 hidden속성의 Element들을 찾아서 배경색을 변경한다. #2버튼을 클릭하면 visibility:hidden이 설정된 Element들을 찾는다.
BigTech #1 |
Amazon | ||
BigTech #2 |
Tesla | ||
Coming Soon BigTech #3 |
[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/hidden</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">
<table name="bigtech" border="1">
<tr>
<td><h3>BigTech #1</h3></td>
<td>Google</td>
<td>Amazon</td>
<td><span style="width:0;height:0;"></span></td>
</tr>
<tr>
<td><h2 style="display:none;">BigTech #2</h2></td>
<td>Tesla</td>
<td>Twitter</td>
<td><span style="visibility:hidden;">Netflex</span></td>
</tr>
<tr>
<td><h1>Coming Soon BigTech #3</h1></td>
<td><input type="hidden" name="mybigcompany" value="My Big Company"/></td>
<td><input type="hidden" name="mybigcompany" value="My Great Company"/></td>
<td><input type="hidden" name="mybigcompany" value="My Awesom Company"/></td>
</tr>
</table>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-find">#1. $("[name='_1q74-example-1'] td > :hidden)</button>
<button name="btn-find-visibility">#2. Find visibility:hidden</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var elements = $("[name='_1q74-example-1'] td > :hidden");
var btnFind = $("[name='btn-find']");
btnFind.click(function() {
elements.each(function(i, el) {
const element = $(el);
if(element.is(":hidden")) {
const parentElement = element.parent();
parentElement.text(parentElement.html());
parentElement.css("background", "mediumslateblue");
} else {
element.removeAttr("style");
}
});
});
var btnFindVisibility = $("[name='btn-find-visibility']");
var visibilityElements = $("[name='_1q74-example-1'] td > span");
btnFindVisibility.click(function() {
visibilityElements.each(function(i, el) {
const element = $(el);
if(element.css("visibility") == "hidden") {
const parentElement = element.parent();
parentElement.text(parentElement.html());
parentElement.css("background", "DarkTurquoise");
}
});
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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-root"] {
min-height: 150px;
}
[name="_1q74-example-1"] {
min-height: 80px;
}
[name="_1q74-example-1"] td {
min-width: 100px;
}
[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]hidden.html
0.00MB
5. See also
useversal-selector, jquery-extensions
6. Reference
https://api.jquery.com/hidden-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #34】:image Selector (0) | 2023.03.05 |
|---|---|
| 【jQuery/Selector #33】ID Selector (“#id”) (0) | 2023.03.05 |
| 【jQuery/Selector #31】:header Selector (0) | 2023.03.04 |
| 【jQuery/Selector #30】:has() Selector (0) | 2023.03.04 |
| 【jQuery/Selector #29】Has Attribute Selector [name] (0) | 2023.03.04 |