정리jQuery

jQuery API 살펴보기 prev() 메서드

jQuery, prev

prev() 메서드는 HTML 내에서 지정한 요소의 이전 요소를 반환하는 메서드이다.

next() 메서드는 다음 요소를 반환하고 prev() 메서드는 이전 요소를 반환하는 것만 차이가 있다.

prev () 메소드는 DOM 요소 집합을 나타내는 jQuery 객체가 주어지면 DOM 트리에서 이러한 각 요소의 이전 요소를 검색하고 일치하는 요소에서 새 jQuery 객체를 생성한다. 앞의 인접한 형제가 아닌 모든 선행 형제 요소를 선택하려면 .prevAll () 메서드를 사용하면 된다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prev demo</title>
  <style>
  div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px blue solid;
    padding: 2px;
  }
  span {
    font-size: 14px;
  }
  p {
    clear: left;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div></div>
<div></div>
<div><span>has child</span></div>
<div></div>
<div></div>
<div></div>
<div id="start"></div>
<div></div>
<p><button>Go to Prev</button></p>

<script>
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
$( "button" ).click(function() {
  $curr = $curr.prev();
  $( "div" ).css( "background", "" );
  $curr.css( "background", "#f99" );
});
</script>

</body>
</html>

$curr 라는 변수에 id 값이 start인 div태그를 저장한다.

버튼을 클릭하면 현재 div의 이전 요소의 jQuery 객체를 반환한다. << prev() 메서드를 실행함

그리고 div 태그의 css의 background를 없애고 $curr의 저장된 div태그에 background를 칠한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prev demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>

<script>
$( "p" ).prev( ".selected" ).css( "background", "yellow" );
</script>

</body>
</html>

prev()의 메서드에 인자로 들어간 .selected 라는 클래스를 찾는다. 이때 .selected가 없으면 jQuery는 빈 객체를 반환하고 있으면 jQuery 객체가 생성된다. 그래서 메서드 체이닝으로 .css() 메서드를 실행할 수 있는 것이다.

Share