:odd

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

:odd 셀렉터는 홀수번째 요소를 찾습니다.

+_+
예제 1
기본 예제
보기
아래 버튼을 눌러보세요 ^^


그런데 왜 짝수번째들이 반응할까요?
소스
<style type="text/css">
    .css_test {
        margin-top : 10px;
    }
    .css_test img {
        width : 80px;
    }
</style>

아래 버튼을 눌러보세요 ^^<br><br>
<button type="button" onclick="j_test()">홀수번째 얼굴들은 봅니다</button>

<div class="css_test">
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
    <img src="http://biketago.com/img/etc/huk1.gif" />
</div>
<br>그런데 왜 짝수번째들이 반응할까요?

<script type="text/javascript">
    function j_test(){
        $('.css_test img:odd').attr('src', 'http://biketago.com/img/etc/huk2.gif');

        // 1초후 원래 표정으로 바꾸기
        setTimeout(function(){
            $('.css_test img:odd').attr('src', 'http://biketago.com/img/etc/huk1.gif');
        }, 1000);
    }
</script>
관련 CSS
jQuery

$( '.css_test  img:odd' )  -  홀수번째 요소를 찾습니다.

- 예제에서는 짝수번째 얼굴들이 반응했습니다.
- 1,3,5 같은 것을 찾지만 적용은 0부터 시작하므로 보기에는 짝수것들이 반응합니다.
- 기억하세요 0 부터 시작이다 !

예제 2
:even, :odd 와 애니메이션 효과
보기
아래 버튼을 여러번 눌러보세요.

소스
<style type="text/css">
    .css_test {
        margin-top : 10px;
    }
    .css_test td {
        width : 70px;
        height : 150px;
    }
    .css_test img {
        width : 60px;
    }
</style>

아래 버튼을 여러번 눌러보세요.<br><br>
<button type="button" onclick="j_test('even')">even 얼굴</button>
<button type="button" onclick="j_test('odd')">odd 얼굴</button>

<table class="css_test" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
        <td><img src="http://biketago.com/img/etc/huk1.gif" /></td>
    </tr>
</table>


<script type="text/javascript">
    function j_test(v){
        $('.css_test img:' + v).stop().slideToggle(1000, 'easeOutElastic');
    }
</script>
관련 CSS
jQuery
관련 메소드 : .slideToggle()
관련 예제 : easing(이징) 효과 모음
+ 관련 jQuery +
jQuery 홈페이지 :odd API 문서 : http://api.jquery.com/odd-selector/