티스토리 뷰

[개발]프로그래밍/jquery

[jquery] filter() - 객체 필터링 선택

좋은 블로그 2016. 10. 1. 07:06

1. filter() - 역할

일반적인 형태가 아닌 다양한 형태로 객체를 선택하고자 할 경우


2. filter() - 예제1

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h4:odd').css({
        color:'blue'
    });
});
</script>
 
<body>
    <h4> 테스트 - 1</h4>
    <h4> 테스트 - 2 </h4>
    <h4> 테스트 - 3 </h4>
    <h4> 테스트 - 4 </h4>
    <h4> 테스트 - 5 </h4>
    <h4> 테스트 - 6 </h4>
    <h4> 테스트 - 7 </h4>
</body>





◈ 결과화면




◈ 설명


:odd 필터를 통해서 h3에서 짝수번째에 위치한 객체를 파란색으로 바꿔주고 있습니다

만약 홀수 번째의 위치를 바꾸고자 할 경우에는 :even 필터링을 사용합니다



3. filter() - 예제2

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h4').filter(function(index){
        return index % 3 ==0;
    }).css({
        color:'blue'
    });
});
</script>
 
<body>
    <h4> 테스트 - 1</h4>
    <h4> 테스트 - 2 </h4>
    <h4> 테스트 - 3 </h4>
    <h4> 테스트 - 4 </h4>
    <h4> 테스트 - 5 </h4>
    <h4> 테스트 - 6 </h4>
    <h4> 테스트 - 7 </h4>
</body>




◈ 결과화면




◈ 설명


index%3 은 index을 3으로 나눈 나머지를 말합니다
 
나머지가  0일 때 index 값을 반환하고 테스트1부터 0번째가 되기 때문에 테스트1,테스트4,테스트7에 색상이 파란색으로 변합니다



'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] add() - 객체 추가 선택  (0) 2016.10.11
[jquery] eq(),first(),last() - 자주 쓰이는 객체 선택  (0) 2016.10.01
[jquery] addClass() ,removeClass() - 클래스 속성 추가 , 삭제  (0) 2016.09.30
[jquery] 필터 선택자 - :을 포함한 선택자  (0) 2016.09.28
[jquery] 속성 선택자 - 속성,구분기호,값  (0) 2016.09.28
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday