목차
- prev() 예제 - li.start의 직전 형제요소 반환
- prev() 정의
- prev() 구문
- prev() 예제 - 각 div의 직전 형제요소 반환
- prev() 예제 - 버튼 바로 앞 이미지 (보이기/숨기기) 토글
- prev() 예제 - 검색 범위 좁히기
prev() 예제 - li.start의 직전 형제요소 반환
<style>
.hz, .hz * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 15px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.start").prev().css({"color": "red", "border": "2px solid red"});
});
</script>
<div class="hz">(조부모)
<ul>ul (부모)
<li>li</li>
<li>li</li>
<li class="start">start</li>
<li>li</li>
<li>li</li>
</ul>
</div>
결과보기
prev() 정의
선택 요소의 바로 앞 형재 요소 반환.
1.
DOM 트리 따라 이전 방향 (= 역방향)으로 형제 요소 탐색.
2.
prevAll() 메서드 - 선택 요소의 모든 이전 형제 요소 반환.
prevUntil() 메서드 - 두 인수 사이 모든 이전 형제 요소 반환.
prev() 구문
$(selector).prev(filter)
[매개변수]
filter
선택. 검색 범위 좁히는 선택자 표현식 지정.
prev() 예제 - 각 div의 직전 형제요소 반환
<style>
div {border:1px solid black;padding:10px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").prev().css("background-color", "yellow");
});
</script>
<h1>H1</h1>
<p>P</p>
<h2>H2</h2>
<div>DIV</div>
<p>P</p>
<p>P</p>
<div> <p>DIV안의 P</p></div>
결과보기
prev() 예제 - 버튼 바로 앞 이미지 (보이기/숨기기) 토글
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<img src="https://i.imgur.com/PQNhCln.gif" width="56" height="56" />
<button type="button" onclick="$(this).prev().toggle()">닫기</button>
결과보기
prev() 예제 - 검색 범위 좁히기
<style>
div {border:1px solid black;padding:10px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").prev("h2").css("background-color", "yellow");
});
</script>
<h1>H1</h1>
<p>P</p>
<h2>H2</h2>
<div>DIV</div>
<p>P</p>
<p>P</p>
<div> <p>DIV안의 P</p></div>
결과보기
