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

1. prevAll() 예제 - li.start 이전 모든 형제요소 반환
2. prevAll() 정의
3. prevAll() 구문
4. prevAll() 예제 - 검색 범위 좁히기
5. prevAll() 예제 - 여러 형제요소 반환
6. prevAll() 예제 - <p> 요소 이전의 모든 형제요소 선택
7. prevAll() 예제 - <div> 요소 이전의 모든 형제 <p> 요소 선택

prevAll() 예제 - 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").prevAll().css({"color": "red", "border": "2px solid red"});

});

</script>

<div class="hz">div (조부모)  

  <ul>ul (부모)  

    <li>li</li>

    <li>li</li>

    <li>li</li>

    <li class="start">li.start</li>

    <li>li</li>

    <li>li</li>

  </ul>

</div>

결과보기

prevAll() 정의

 

선택요소 이전의 모든 형제요소 반환.

 

---

 

1.

DOM 구조를 따라 이전 방향 (= 역방향)으로 탐색.

 

2. cf.

• prev() 메서드 - 선택요소의 바로 이전 형제요소 반환.
• prevUntil() 메서드 - 두 인수 사이의 이전 형제요소 반환.

 

3. 예제 더 보기

https://api.jquery.com/prevall/

 

prevAll() 구문

 

$(selector).prevAll(filter)

 

---

[매개변수]

 

filter

선택. 검색 범위를 좁힐 필터 지정.

※ 여러 형제 요소 지정하려면, 콤마(,)로 구분해 나열.

 

prevAll() 예제 - 검색 범위 좁히기

 

<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").prevAll(".my").css({"color": "red", "border": "2px solid red"});

});

</script>

<div class="hz">div (조부모)  

  <ul>ul (부모)  

    <li class="my">li</li>

    <li>li</li>

    <li class="my">li</li>

    <li class="start">li.start</li>

    <li>li</li>

    <li>li</li>

  </ul>

</div>

결과보기

prevAll() 예제 - 여러 형제요소 반환

 

<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(){

  $("h2").prevAll(".a, .b, .c").css({"color": "red", "border": "2px solid red"});

});

</script>

<div class="hz">

  <h3 class="a">h3.a</h3>

  <span>span</span>

  <span class="b">span.b</span>  

  <p>p</p>

  <p class="c">p.c</p>

  <p>p</p>

  <h3>h3</h3>

  <h2>h2</h2>

  <span class="a">span.a</span>

  <span class="b">span.b</span>

  <p class="c">p.c</p>

</div>

 

결과보기

prevAll() 예제 - <p> 요소 이전의 모든 형제요소 선택

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").prevAll().css("background-color", "yellow");

});

</script>

<p>p</p>

<div>div</div>

<p>p</p>

<h4>h4</h4>

<h5>h5</h5>

<span>span</span>

<p>p</p>

 

결과보기

prevAll() 예제 - <div> 요소 이전의 모든 형제 <p> 요소 선택

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div").prevAll("p").css("background-color", "yellow");

});

</script>

<h1>h1</h1>

<p>p</p>

<h2>h2</h2>

<div><p>div>p</p></div>

<p>p</p>

<p>p</p>

<div>div</div>

<p><strong>p>strong</strong></p>

 

결과보기