JavaScript/jQuery

【jQuery/Selector #62】:visible Selector

1Q74 2023. 3. 15. 15:02

1. Description

jQuery(":visible")
visible한(보여지고 있는) Element들을 찾는다. 

document안에서 공간을 차지하고 있는 Element는 visible로 인식되기 때문에, visibility: hidden이나 opacity: 0도 visible Element로 인식된다.
document 안에 존재하지 않는 Element들은 hidden Element로 인식된다. 해당 Element가 style이 적용되어서 visible하게 될 지 그렇지 않을지 jQuery로서는 알 수 있는 방법이 없기 때문이다.
visible selector는 hidden selector의 정반대 selector이다.
<option>은 selected여부와 관계없이 hidden Element로 간주된다.
jQuery 3부터는 <br/>또는 inline Element와 같이 어떤 내용도 갖지 않는 Element들도 visible selector로 선택될 수 있다.

2. Example

#1버튼을 클릭하면 배경색이 초기화된다.

#2버튼을 클릭하면 visible Element를 가지고 있는 <td>의 배경색을 변경한다.

#3버튼을 클릭하면 hidden Element를 가지고 있는 <td>의 배경색을 변경한다.

버튼을 클릭할 때마다 다른 색깔로 배경색이 변경된다.

[1q74.tistory.com] javascript/jquery/selector/visible

Input Collections!!

[type="radio"]
[type="checkbox"]
[type="hidden"] is here...
<br> is here...




[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/visible</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>Input Collections!!</h4>
			<table name="bigtech" border="1">
				<tr>
					<td>
						<input type="text" name="text" value="[type='text']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" name="button" value="[type='button']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="image" name="image" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"/>
					</td>
				</tr>
					<td>
						<input type="submit" name="submit" value="[type='submit']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="file" name="file" value="[type='file']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" name="password" value="[type='password']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="reset" name="reset" value="[type='reset']"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="radio" value="[type='radio']"/>[type="radio"]
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="checkbox" value="[type='checkbox']"/>[type="checkbox"]
					</td>
				</tr>
				<tr>
					<td>
						<select name="select">
							<option>option-1</option>
							<option>option-2</option>
							<option>option-3</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<textarea>textarea</textarea>
					</td>
				</tr>
				<tr>
					<td>
						[type="hidden"] is here...
						<input type="hidden" name="hidden" value="hidden"/>
					</td>
				</tr>
				<tr>
					<td>
						&lt;br&gt; is here...
						<br/>
					</td>
				</tr>
			</table>
		</div>

		<div name="_1q74-example-bottom">
			<br/>
			<button name="btn-initialize">#1. 초기화</button><br/>
			<br/>
			<button name="btn-find-visible">#2. $("[name='_1q74-example-1'] :visible")</button><br/>
			<button name="btn-find-hidden">#3. $("[name='_1q74-example-1'] :hidden")</button>
		</div>
	</div>

	<hr/>
	<h5>[HTML Code]</h5>
	<div name="_1q74-source">
	</div>
	<h5>[//HTML Code]</h5>

<script>
var visibleElements = $("[name='_1q74-example-1'] td :visible");
var hiddenElements = $("[name='_1q74-example-1'] td :hidden");
var btnInitialize = $("[name='_1q74-example-bottom'] [name='btn-initialize']");
var btnFindVisible = $("[name='_1q74-example-bottom'] [name='btn-find-visible']");
var btnFindHidden = $("[name='_1q74-example-bottom'] [name='btn-find-hidden']");

var rainbowColors = [
	"red",
	"orange",
	"yellow",
	"green",
	"blue",
	"navy",
	"purple"
];
var visibleClickCount = 0;
var hiddenClickCount = 0;


function changeBackground(elements, clickCount) {
	elements.each(function(i, el) {
		const element = $(el);
		let colorIndex = i + clickCount;

		if(colorIndex >= rainbowColors.length) {
			colorIndex %= rainbowColors.length;
		}

		if(!element.is("[style]")) {
			element.parent().css("background", rainbowColors[colorIndex]);
		}
	});
}

btnInitialize.click(function() {
	$.each([visibleElements, hiddenElements], function(i, el) {
		const element = $(el);
		element.parent().removeAttr("style");
	});
});

btnFindVisible.click(function() {
	changeBackground(visibleElements, visibleClickCount);
	++visibleClickCount;
});

btnFindHidden.click(function() {
	changeBackground(hiddenElements, hiddenClickCount);
	++hiddenClickCount;
});

// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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", "&nbsp;&nbsp;"));
</script>
<style>
[name="_1q74-example-root"] {
	min-height: 200px;
}

[name="_1q74-example-1"] {
	min-height: 170px;
}

[name="_1q74-example-bottom"] {
	min-height: 150px;
}

[name="_1q74-example-root"] [type="image"]{
	width: 100px;
}

[name="_1q74-example-1"] td {
	min-width: 100px;
	min-height: 30px;
}

[name|="_1q74-example"] button
,[name="_1q74-source"] button {
	background: lightgray;
	border: 5px outset;
	min-height: 40px;
}

[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
	border: 2px inset;
	min-height: 40px;
}
</style>

</body>
</html>

4. File

[javascript][jquery][selector]visible.html
0.00MB

5. See also

pseudo-class, useversal-selector, jquery-extensions

 

:hidden selector

 

【jQuery/Selector #32】:hidden Selector

1. Description jQuery( ":hidden" ) : 숨겨진 모든 Element들을 찾는다. 다음의 경우 숨겨진 Element로 취급될 수 있다. display:none으로 설정된 경우 input type="hidden"으로 설정된 경우 width와 height가 0으로 설정된

1q74.tistory.com

6. Reference

https://api.jquery.com/visible-selector/

 

 

 

'JavaScript > jQuery' 카테고리의 다른 글

【jQuery/Traversing】addBack([selector])  (0) 2023.04.13
【jQuery/Traversing】.add(selector)  (0) 2023.03.21
【jQuery/Selector #61】:text Selector  (0) 2023.03.15
【jQuery/Selector #60】:target Selector  (0) 2023.03.15
【jQuery/Selector #59】:submit Selector  (0) 2023.03.15

'JavaScript/jQuery'의 다른글

  • 현재글【jQuery/Selector #62】:visible Selector

관련글

댓글

티스토리툴바