본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 이전에 있는 것들, prevAll()

by zoo10 2011. 7. 5.

.prevAll()

원문 링크 http://api.jquery.com/prevAll/

.prevAll( [selector] )Returns : jQuery

개요 : 이전에 위치한 요소들을 모두 찾아 줍니다. 선택자를 인자로 가질 수 있습니다.

  • .prevAll( [ selector ] )
  • selector 요소를 선택하기 위해 필요한 선택자 문자열

.prevAll() 함수는 DOM 트리를 기준으로 하여 조건에 맞는 모든 앞쪽 요소들을 새로운 jQuery 객체로 만들어 반환해 줍니다.

이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 선택자가 주어졌고 선택될 수 있는 바로 이전 요소들이 있다면 jQuery 객체에 포함되어 반환되고 그렇지 않다면 제외됩니다.

그럼 여기서 .prevAll() 함수의 간단한 예제로 개념을 익혀보도록 하겠습니다.

<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').prevAll().css('background-color', 'red');

이 스크립트의 결과는 item 1, 2 가 빨간색으로 바뀌게 됩니다. 선택자 표현을 포함하지 않았기 때문에 선택된 요소인 item 3 이전에 있는 요소를 무조건 선택하게 됩니다. 만일 선택자 표현을 추가하면 요소를 선택하기 전에 선택자에 의한 검증을 실시하게 됩니다.

예 제  
div중 마지막을 찾아내고 그 이전에 위치한 요소들을 모두 선택합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div { width:70px; height:70px; background:#abc; 
        border:2px solid black; margin:10px; float:left; }
  div.before { border-color: red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<script>$("div:last").prevAll().addClass("before");</script>
 
</body>
</html>

미리보기

before라는 클래스를 확인해 보니 테두리를 빨간색으로 해주는 거네요. 결과를 보면 잘 적용되었죠? 이해가 쉽습니다.

 

prev() 함수의 확장판 prevAll() 함수를 기억해 주세요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.