.prev()
원문 링크 
http://api.jquery.com/prev/
개요 : 선택 집합의 각 요소별로 바로 이전에 오는 요소를 반환해 줍니다. 만일 선택자(selector)가 인자로 주어졌다면 그 선택자와 일치하는 요소만 반환이 됩니다.
- .prev( [ selector ] )
- selector 요소를 선택하기 위해 필요한 선택자 문자열
.prev() 함수는 DOM 트리를 기준으로 하여 바로 이전 요소를 새로운 jQuery 객체로 만들어 반환해 줍니다.
이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 요소들이 있다면 결과에 포함되어 jQuery 객체가 반환되고 그렇지 않다면 제외됩니다. .next()함수와 같은 개념입니다.
그럼 여기서 .prev() 함수의 간단한 예제로 개념을 익혀보도록 하겠습니다.
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
3번째 부터 시작해서 그 이전에 있는 것을 찾고 싶으시다면 아래와 같이 스크립트를 작성하시면 됩니다.
$('li.third-item').prev().css('background-color', 'red');이 스크립트의 결과는 item 2 가 빨간색으로 바뀌게 됩니다. 선택자 표현을 포함하지 않았기 때문에 선택된 요소인 item 2 다음으로 오는 요소를 무조건 선택하게 됩니다. 만일 선택자 표현을 추가하면 다음 요소를 선택하기 전에 선택자에 의한 검증을 실시하게 됩니다.
예 제
버튼을 클릭하면 바로 이전 요소로 이동합니다.
<!DOCTYPE html>
<html>
<head>
<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="http://code.jquery.com/jquery-latest.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>미리보기
버튼 눌러 보세요. 바로 이전 요소가 선택된다는 것을 알 수 있습니다. 재미있는 예제네요. 잘 익혀두시기 바랍니다.
예 제
p 태그 바로 이전에 있는 요소를 찾습니다. 단, "selected"라는 클래스를 사용하는 녀석만 찾아야 합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.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>미리보기
p 태그 이전에 위치한 요소이면서 class='selected'인 요소의 바탕색이 노란색으로 바뀐 걸 보실 수 있습니다.
prev() 함수와 next() 함수를 잘 기억해 두셨다가 유용하게 사용하시기 바랍니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 뒤에 추가하기, after() (1) | 2011.07.14 |
|---|---|
| jQuery API 정복 - 범위로 자르기, slice() (0) | 2011.07.07 |
| jQuery API 정복 - 형제 요소들 찾기, siblings (0) | 2011.07.06 |
| jQuery API 정복 - 이전에 있는 것들, prevAll() (0) | 2011.07.05 |
| jQuery API 정복 - 특정 조건을 만날 때까지 이전 요소들을 쭈욱, prevUntil() (0) | 2011.06.30 |
| jQuery API 정복 - 특정 부모를 찾을 때까지, parentsUntil() (0) | 2011.06.29 |
| jQuery API 정복 - position으로 부모 찾기, offsetParent() (0) | 2011.06.29 |
| jQuery API 정복 - 부모들 찾기, parents() (0) | 2011.06.28 |