[Traversing] JQ - prev() 메서드 - 선택요소 이전 형제요소 반환 (= prev메서드 = 프리브메서드)

1. prev() 예제 - li.start의 직전 형제요소 반환
2. prev() 정의
3. prev() 구문
4. prev() 예제 - 각 div의 직전 형제요소 반환
5. prev() 예제 - 버튼 바로 앞 이미지 (보이기/숨기기) 토글
6. 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>

 

결과보기