[JQuery] JQuery Select Box 제어
[JQUERY] jQuery Traverse(탐색) - 필터링 (Filtering) (1)
- Traverse 메서드를 이용하면 셀렉터를 통해 가져온 개체, 즉 1차 결과물에 추가적인 작업을 통한 2차, 3차 등의 결과를 쉽게 얻을 수 있다는 장점
- Traverse 메서드는 크게 Filtering, Miscellaneous Traverse, Tree Traverse 3가지로 구분
- Filtering에서 대표적으로 eq(), first(), last(), not() 메서드가 존재 한다. - Filtering 중 첫번째로 filter메서드에 대해 알아보자.
| 메서드 종류(형식) | 메서드 설명 |
|---|---|
| .filter(expr) | 선택한 요소에서 표현식(expr)과 일치하는 요소의 집합을 선택 반환한다. 표현식에는 selector, function, element, jQuery object가 올 수 있다. |
1) .filter(expr)
- 1차적으로 셀렉터를 통해 선택한 요소들의 집합에서 또 한번의 필터링을 통해 원하는 개체를 선택하는 메서드이다.
- 표현식 부분에는 Selector, function, element, jQuery object가 위치할 수 있다.
- 간단한 예시 : $(“td:even”) == $(“td”).filter(“:even”) 동일한 결과
예제
<script type=text/javascript>
$(document).ready(function () {
$(td).filter(function (index) { return index % 3 == 0; }).css(background, red);
});
</script>
<body>
<table>
<tr>
<td> #1 </td>
<td> #2 </td>
<td> #3 </td>
<td> #4 </td>
<td> #5 </td>
</tr>
<tr>
<td> #6 </td>
<td> #7 </td>
<td> #8 </td>
<td> #9 </td>
<td> #10 </td>
</tr>
<tr>
<td> #11 </td>
<td> #12 </td>
<td> #13 </td>
<td> #14 </td>
<td> #15 </td>
</tr>
<tr>
<td> #16 </td>
<td> #17 </td>
<td> #18 </td>
<td> #19 </td>
<td> #20 </td>
</tr>
<tr>
<td> #21 </td>
<td> #22 </td>
<td> #23 </td>
<td> #24 </td>
<td> #25 </td>
</tr>
</table>
</body>
| #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 |
출처 -
'Web Application > jQuery' 카테고리의 다른 글
| [jQuery] JSON 데이터 정렬해주는 사이트 (1) | 2016.01.18 |
|---|---|
| [JQuery] JQuery Select Box 제어 (0) | 2016.01.18 |
| [jQuery] jQuery의 반복문(each문 사용법) (0) | 2015.12.22 |