jquery에서 상위 요소를 숨기는 방법-프런트엔드 Q&A-php.cn

jquery에서 상위 요소를 숨기는 방법

青灯夜游

풀어 주다： 2022-06-06 14:38:42

원래의

3648명이 탐색했습니다.

jquery에서 상위 요소를 숨기는 방법: 1. parent()를 사용하여 지정된 요소의 상위 요소를 가져옵니다. 구문은 "$("specified element").parent()"입니다. 2. hide()를 사용합니다. fadeOut(), fadeTo() 및 SlideUp() 함수는 획득된 요소를 숨깁니다. 구문은 "부모 요소 object.hide()", "부모 요소 object.fadeOut()", "부모 요소 object.fadeTo(milliseconds, 0)" ”, “상위 요소 object.slideUp()”.

jquery에서 상위 요소를 숨기는 방법

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

jquery에서 상위 요소를 숨기는 방법

jquery에서 지정된 요소의 상위 요소를 숨기려면 먼저 상위 요소를 가져온 다음 숨겨야 합니다.

부모 요소를 얻으려면 선택한 요소의 직접 부모 요소를 반환할 수 있는 parent() 메서드를 사용할 수 있습니다.
부모 요소를 가져온 후 hide(), fadeOut(), fadeTo(), SlideUp()을 사용하여 요소를 숨길 수 있습니다.
- hide() 메서드를 사용하여 선택한 요소를 숨길 수 있습니다(표시 추가: 숨길 요소 스타일에는 없음).
- fadeOut() 메서드는 선택한 요소의 불투명도를 표시에서 숨김(페이드 효과)으로 점진적으로 변경합니다.
- slideUp() 메서드는 선택한 요소를 슬라이딩 방식으로 숨깁니다.
- fadeTo() 메서드는 선택한 요소의 불투명도를 지정된 값으로 점진적으로 변경합니다(페이드 효과). 최종 불투명도를 0으로 설정하면 됩니다.

예: 상위 요소를 숨기려면 parent() 및 hide()를 사용하세요.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script 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").css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").parent().hide();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;border: 2px solid pink;" class="siblings">div容器
			<ul>ul (父节点)
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="start">类名称为“star”的li元素</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
			</ul>
		</div>
		<p>隐藏类名称为“star”的父元素-ul</p>
		<button>隐藏父元素</button>
	</body>
</html>

로그인 후 복사

jquery에서 상위 요소를 숨기는 방법