jquery에서 요소에 하위 노드가 있는지 확인하는 방법-프런트엔드 Q&A-php.cn

jquery에서 요소에 하위 노드가 있는지 확인하는 방법

青灯夜游

풀어 주다： 2022-12-16 17:46:33

원래의

2668명이 탐색했습니다.

방법: 1. children()을 사용하여 요소 아래의 모든 하위 노드를 가져옵니다. "element object.children()" 구문은 하위 노드가 포함된 jQ 객체를 반환합니다. 2. length를 사용하여 하위 노드 수를 확인합니다. 0. , 구문 "object.length==0", 숫자가 0이면 자식 노드가 없고 그렇지 않으면 자식 노드가 있습니다.

jquery에서 요소에 하위 노드가 있는지 확인하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

jquery 메서드를 사용하여 요소에 하위 노드가 있는지 확인

1. children()을 사용하여 요소 아래의 모든 하위 집합 요소를 가져옵니다.

children() 메서드는 선택한 요소의 모든 직접 하위 요소를 반환합니다.

$(selector).children()

로그인 후 복사

는 모든 하위 노드를 포함하는 jQuery 객체를 반환합니다

2. 길이 속성을 사용하여 하위 노드 수가 0

인지 확인합니다. 길이 속성은 지정된 jQuery 객체의 요소 수를 가져올 수 있습니다

획득 여부만 확인하면 됩니다. 자식 노드 수가 0

jQuery对象.length==0

로그인 후 복사

자식 노드 수가 0인지 확인하면 됩니다. 그러면 자식 노드가 없습니다.
자식 노드 수가 0이 아니면 하위 노드가 있습니다

구현 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			.div,
			div * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>

		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					var len=$("ul").children().length;
					console.log("ul元素中有子节点，个数为："+len);
					$("ul").children().css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="width:500px;">div (父节点)
			<ul>ul (指定元素)
				<li>li (子节点1)
					<span>span (孙节点1)</span>
				</li>
				<li>li (子节点2)
					<span>span (孙节点2)</span>
				</li>
				<li>li (子节点3)
					<span>span (孙节点3)</span>
				</li>
			</ul>
		</div>
		<button>检测ul元素是否有子节点</button>
	</body>

</html>

로그인 후 복사

jquery에서 요소에 하위 노드가 있는지 확인하는 방법