집 > 기사 > 웹 프론트엔드 > jquery를 사용하여 형제 요소를 쿼리하는 방법

jquery를 사용하여 형제 요소를 쿼리하는 방법

青灯夜游원래의: 2022-03-15 13:02:546474검색

쿼리 방법: 1. 동일한 레벨의 모든 요소를 얻으려면 siblings() 메서드를 사용하십시오. 2. 다음 형제 요소를 얻으려면 next() 메서드를 사용하십시오. 3. nextAll()을 사용하십시오. 5. prev()를 사용합니다. 6. prevAll()을 사용합니다. 7. prevUntil()을 사용합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

jquery에서 형제 요소를 쿼리하는 방법

jquery에는 일반적으로 형제 요소를 쿼리하는 7가지 메서드가 있습니다: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll( ), prevUntil()

siblings() 메서드는 주로 지정된 요소의 동일한 수준의 모든 요소를 가져오는 데 사용됩니다.
next() 메서드는 주로 지정된 요소의 다음 형제 요소를 가져오는 데 사용됩니다
nextAll() 메서드는 지정된 요소의 다음 형제 요소를 모두 가져오는 데 주로 사용됩니다. nextUntil() 메서드는 주로 지정된 요소의 다음 형제 요소를 가져오는 데 사용됩니다. 지정된 요소와 동일합니다. nextUntil() 메소드로 설정된 요소 사이의 요소
prev() 메소드는 주로 지정된 요소의 상위 형제 요소를 가져오는 데 사용됩니다.
prevAll() 메소드가 주로 사용됩니다. 지정된 요소의 이전 요소를 얻으려면 모든 형제 요소 레벨
prevUntil() 메소드는 주로 지정된 요소의 이전 형제 요소를 얻는 데 사용됩니다. 이 형제 요소는 지정된 요소와 요소 사이의 요소여야 합니다. prevUntil() 메서드에 의해 설정됨

siblings() 메서드

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div><span>Hello</span></div>
		<p class="selected">Hello Again</p>
		<p>And Again</p>

		<script>
			$("p").siblings(".selected").css("background", "yellow");
		</script>

	</body>
</html>

next() 메서드

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

nextAll() 메서드

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>

		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).nextAll().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

다음까지 () 메소드

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
				<li class="start">li (类名为"start"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>

	</body>
</html>

prev() 메소드

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>

prevAll() 메소드

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>

	</body>
</html>

prevUntil() 메소드

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>

	</body>
</html>

【추천 학습: jQuery 동영상 튜토리얼

웹 프론트엔드 동영상 jquery를 사용하여 형제 요소를 쿼리하는 방법 】

위 내용은 jquery를 사용하여 형제 요소를 쿼리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS3의 클래스 선택자는 무엇입니까?다음 기사：CSS3의 클래스 선택자는 무엇입니까?