JavaScript/jQuery

【jQuery/Selector #1】All Selector (“*”)

1Q74 2023. 2. 19. 20:58

1. Description

jQuery("*")
부모 Element하위에 있는 모든 자식 Element를 찾는다.

2. Example

#1버튼을 클릭하면 <div id="_1q74-example">태그 하위의 모든 Element를 찾아서, 태그이름과 텍스트를 표시한다.

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

This is a box in yellow

box1

This is a box in green

box2

All Elements



3. Code

더보기 
<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<title>[1q74.tistory.com] javascript/jquery/selector/all</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
.box, .box1, .box2 {
	width:300px;
	height:25px;
}

.box1 {
	background-color:yellow;
}

.box2 {
	background-color:green;
}
</style>
</head>
<body>

	<div name="_1q74-example-root">
		<div id="_1q74-example">
			<p>This is a box in yellow</p>
			<div class="box1">box1</div>
			<br/>
			<p>This is a box in green</p>
			<div class="box2">box2</div>
			<hr/>
		</div>

		<div id="_1q74-example-bottom">
			<h4>All Elements</h4>
			<div id="query-selector-all-result">
			</div>	
			<br/>
			<br/>
			<table border="1">
				<tr>
					<td colspan="2">
						<button name="btn-find">#1. $("#_1q74-example *")</button>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" id="chk-view-source"/>
						<label for="chk-view-source">View Source</label>
					</td>
					<td>
						<button name="btn-initialize">Initialize</button>
					</td>
				</tr>
			</table>
		</div>
	</div>

<script>
/////////////////////////////////////////////////////////////////
//
// Execute example
//
/////////////////////////////////////////////////////////////////
const originalElements = $("#_1q74-example *");
const result = $("#query-selector-all-result");

const btnFind = $("[name='btn-find']");
btnFind.click(function() {
	var tagNames = "";

	clonedElements.each(function(i, el) {
		const element = $(el);

		if(i > 0) tagNames += "<br/>";
		tagNames += element[0].tagName + " : " + element.text();
	});

	result.html(tagNames);
});

/////////////////////////////////////////////////////////////////
//
// Control example
//
/////////////////////////////////////////////////////////////////
const clonedElements = originalElements.clone();
const chkViewSource = $("#chk-view-source");

chkViewSource.click(function() {
	const isChecked = $(this).is(":checked");

	if(isChecked) {
		originalElements.each(function(i, el) {
			const element = $(el);
			const html = $("<div>").append(element.clone()).html();
			const specialCharHtml = $("<div>").text(html).html();
			element.html(specialCharHtml);
		});
	} else {
		originalElements.each(function(i, el) {
			const element = $(el);
			const html = $(clonedElements[i]).html();
			element.html(html);
		});
	}
});

const btnInitialize = $("#_1q74-example-bottom [name='btn-initialize']");
btnInitialize.click(function() {
	result.html("");
});
</script>

<style>
#_1q74-example {
	min-height: 200px;
}

#_1q74-example-bottom button {
	background: lightgray;
	border: 5px outset;
	min-height: 35px;
	width: 100%;
}

#_1q74-example-bottom button:active {
	border: 5px inset;
	min-height: 35px;
	width: 100%;
}
</style>
</body>
</html>

4. File

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

5. See also

[Native] querySelectorAll

 

【JavaScript/Native #1】querySelectorAll("*")

1. Description 부모 Element하위에 있는 모든 자식 Element를 찾는다. [EX-1] document하위의 모든 Element찾는다. document.querySelectorAll("*") [EX-2] id가 _1q74-example인 Element의 하위에 있는 모든 Element를 찾는다. docume

1q74.tistory.com

6. Reference

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