• 회원가입
  • 로그인

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

목차
  1. prev() 예제 - li.start의 직전 형제 요소 반환
  2. prev() 정의
  3. prev() 구문
  4. prev() 예제 - 각 div의 직전 형제 요소 반환
  5. 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() 예제 - 검색 범위 좁히기

 

<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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012