.filter()
원문 링크 
http://api.jquery.com/filter/
개요 - 선택된 요소 집합에서 선택자를 추가하여 집합을 축소시키거나 함수의 테스트를 위해 인자를 전달합니다.(ㅡㅡ;; 당췌 뭔소린지 모르겠습니다. 아마 아래 예제를 쭈욱 보셔야 할 듯해요.)
- .filter( selector )
- selector 현재 선택된 요소들의 집합 안에서 재추출(filter)를 위한 선택자를 표현하는 문자열
- .filter( function(index) )
- function(index) 집합에 속한 요소들을 테스트 할 함수. this 키워드는 현재 요소를 지칭함
- .filter( element )
- element 선택된 요소들 중에서 찾을 요소(태그)
- .filter( jQuery object )
- jQuery object 선택된 요소들 중에 찾을 존재하는 jQuery 객체
ㅠㅠ 이번장에서 발번역의 한계를 느낍니다. ;;; 감안해서 보시고 아래 예제로 이해하시는 편이 신상에 좋으실 듯 합니다.
jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .filter() 함수를 사용하면 선택된 요소들의 일부부을 추출하여 새로운 jQuery 객체를 생성합니다. 각 요소들에 대해 주어진 선택자에 일치하는지 테스트를 하고 일치하는 또는 합당한 모든 요소들을 결과에 포함시킵니다. 쉽게 말씀드리면 이미 선택된 요소 집합들에서 새로운 추출을 하여 나온 요소들의 집합이 생성된다는 것입니다. 헉~ 전혀 쉽지 않네요. ==3
간단한 리스트를 구성하는 마크업을 예로 들어 보겠습니다. 우리는 가상의 리스트 마크업에 이런 식의 스크립트를 적용해 볼 수 있습니다.
위 스크립트는 $(li)로 인해 선택된 li 요소들 중에 인덱스 번호 기준으로 짝수번째(눈으로 보기에는 1, 3, 5 번째이지만)의 li의 배경색을 빨간색으로 바꾸게 됩니다. 즉 재주출이라는 얘기입니다.
추출용 함수 사용
filter()함수를 사용하는 두번째 방법은 추출을 위한 함수를 사용하는 것입니다. 이 방법은 선택자(selector)를 사용하는 것보다 좋습니다. 각 요소들에 대해 함수의 결과가 true라면 새로운 결과 집합에 포함시키고 false 라면 제외시켜 버립니다. 아래와 같은 html을 예로 들어 보겠습니다.
<ul>
<li><strong>list</strong> item 1 -
one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>추출된 리스트 요소를 기반으로 재추출을 위한 함수를 사용하는 스크립트의 예는 아래와 같습니다.
$('li').filter(function(index) {
return $('strong', this).length == 1;
}).css('background-color', 'red');위 스크립트는 리스트(li) 안에 단 하나의 <strong>태그만 가진 리스트를 찾아 하나의 결과 집합을 구성하는 스크립트입니다. 위에서 사용된 this 키워드는 리스트(li)들을 의미합니다. 즉 모든 li 들이 this에 한번씩 해당하게 되는 것입니다. 인자로 넘겨진 index 는 각 li들의 인덱스를 뜻합니다.
우리는 이 index 인자를 사용하여 좀 더 나은 함수를 구성할 수 있습니다. 인덱스는 0을 초기값으로 하고 li들의 모든 인덱스를 가집니다.
$('li').filter(function(index) {
return index % 3 == 2;
}).css('background-color', 'red');이 코드는 세번째, 여섯번째 리스트의 배경색을 바꾸게 됩니다. 여기서 사용된 (%) 연산자는 나머지 연산자입니다. 위의 예제에서는 3으로 나누고 남은 나머지가 2인지 확인하는 것입니다.그러니까 눈으로 볼때 3번째 리스트 즉 인덱스 기준으로 2인 리스트가 3으로 나눈 나머지가 2가 되는 것입니다. 와우 쉽죠~~.
예 제
모든 div 들의 배경색을 바꾸고 클래스가 middle인 div의 테두리를 빨간색으로 바꿔줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:2px white solid;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script>
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
</script>
</body>
</html>
미리보기
결과만 보셔도 딱 아시겠죠?? 하하
예 제
div들의 배경색을 바꾸고 함수를 사용해 재추출(filter)하여 추가적인 효과를 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:3px white solid; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<script>
$("div").css("background", "#b4b0da")
.filter(function (index) {
return index == 1 || $(this).attr("id") == "fourth";
})
.css("border", "3px double red");
</script>
</body>
</html>
미리보기
이번 예제는 첫번째 예제와 비슷하지만 함수를 사용하고 있습니다. 잘 보시면 인덱스가 1인 div(눈으로 보기엔 두번째가 됩니다. 왠지 이제는 아시죠?)와 id값이 fourth 인 div의 테두리가 바뀐것을 보실 수 있습니다.
부왁~ 이번 포스팅은 쓰고 봤더니 진짜 발번역에 오역, 제 마음대로 해석이네요. ㅜㅜ 아마 심도있게 보실 분은 원문을 한번 더 보심이 좋을실 듯 합니다. 하시는 일 잘 되세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 맞는지 확인하기, is() (6) | 2011.05.30 |
|---|---|
| jQuery API 정복 - 가지고 있나 없나? has() (2) | 2011.05.25 |
| jQuery API 정복 - 첫번째 요소 찾기, first() (2) | 2011.05.24 |
| jQuery API 정복 - 하위 요소 전부 찾기, find() (2) | 2011.05.19 |
| jQuery API 정복 - 인덱스로 요소 찾기, eq() (4) | 2011.05.02 |
| jQuery API 정복 - 이전 선택요소로 돌아가기, end() (2) | 2011.04.29 |
| jQuery API 정복 - 선택된 요소만큼 루프, each() (4) | 2011.04.28 |
| jQuery API 정복 - 텍스트 노드를 포함한 자식요소 가져오기, contents() (4) | 2011.04.26 |