jquery에서 클릭한 요소의 인접한 요소를 숨기는 방법-프런트엔드 Q&A-php.cn

jquery에서 클릭한 요소의 인접한 요소를 숨기는 방법

青灯夜游

풀어 주다： 2022-03-25 18:05:01

원래의

1677명이 탐색했습니다.

방법: 1. click()을 사용하여 클릭 이벤트를 요소에 바인딩하고 처리 기능을 설정합니다. 2. 처리 함수에서 next() 및 prev() 함수를 사용하여 인접 요소를 가져오고 hide( ) 인접한 요소를 얻으려면 요소가 숨겨져 있으며 구문은 "element.next().hide(); element.prev().hide()"입니다.

jquery에서 클릭한 요소의 인접한 요소를 숨기는 방법

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

jquery는 요소를 클릭하고 인접한 요소를 숨기는 기능을 구현합니다.

구현 방법:

click() 함수를 사용하여 클릭 이벤트를 지정된 요소에 바인딩하고 처리 기능을 설정합니다.
처리 함수에서 next() 및 prev() 함수를 사용하여 인접한 요소를 얻고 hide() 함수를 사용하여 얻은 요소를 숨깁니다.
- next(): 다음 형제 요소를 얻는 데 사용됩니다.
- prev(): 이전 형제 요소를 가져오는 데 사용됩니다.

구현 코드:

<!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"
				});
				$("li.start").click(function() {
					$("li.start").next().hide();
					$("li.start").prev().hide();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li </li>
				<li>li (类名为"star"的相邻元素)</li>
				<li class="start">类名称为“star”的li元素</li>
				<li>li (类名为"star"的相邻元素)</li>
				<li>li </li>
			</ul>
		</div>
		<p>点击类名称为“star”的li元素，隐藏其相邻的两个元素</p>
	</body>
</html>

로그인 후 복사

jquery에서 클릭한 요소의 인접한 요소를 숨기는 방법