웹 프로그래밍/jQuery

[jQuery] 형제 CSS 설정 : siblings, next, nextUntil, prev, prevUtill, prevAll

산을넘는다 2020. 6. 24. 13:16

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body * {
		border: 1px solid red;
		display: block;
		margin: 10px;
		padding: 10px;
	}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
	$(document).ready(function() {
		//$('h2').siblings().css('border-color', 'blue')
		//$('h2').siblings('h3').css('border-color', 'blue')
		//$('h2').next().css('border-color', 'blue') // h2 태그의 형제들 중 바로 다음 태그
		//$('h2').prev().css('border-color', 'blue') // h2 태그의 형제들 중 바로 이전 태그
		//$('h2').nextUntil().css('border-color', 'blue') 
		//$('h2').nextUntil('p').css('border-color', 'blue') 
		//$('h2').prevAll().css('border-color', 'blue') 
		//$('h2').prevAll('span').css('border-color', 'blue') // 이전 모든 것 중에 span
		//$('h2').prevUntil('p').css('border-color', 'blue') // p태그 전까지
		//$('h3').siblings().css('border-color', 'blue')
		$('h3').siblings().eq(1).css('border-color', 'blue')
	})
</script>
</head>
<body>
	<div>div1
		<p>p1-1</p>
		<span>span</span>
		<h1>h1</h1>
		<h2>h2</h2>
		<h3>h3
			<p>p1-2-1</p>
		</h3>
		<p>p1-3</p>
	</div>
	<div>div2
		<h2>h2</h2>
		<h3>h3</h3>
		<p>p2-1</p>
	</div>
</body>
</html>