jQuery 공작소 : :eq

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

:eq 셀렉터는 요소를 순서로 접근하여 찾습니다.

예제 1
순서를 이용하여 이미지 반응 시키기
보기
소스
<style type="text/css">
    .css_test {
        margin-top : 10px;
    }
    .css_test img {
        width : 80px;
    }
</style>

<button type="button" onclick="j_test(0)">첫번째 얼굴은 봅니다</button>
<button type="button" onclick="j_test(1)">두번째 얼굴은 봅니다</button>
<button type="button" onclick="j_test(2)">세번째 얼굴은 봅니다</button>
<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img:eq(' + n + ')').attr('src', '//superkts.com/img/huk2.gif');

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

$( '셀렉터:eq(숫자)' )  -  셀렉터에 해당하는 요소중 특정 순서의 것을 찾습니다.
$( '셀렉터:eq(0)' )  -  셀렉터에 해당하는 요소중 첫번째것 (0부터 시작)
$( '셀렉터:eq(2)' )  -  셀렉터에 해당하는 요소중 세번째것

$( '.css_test  img:eq(0)' )  -  클래스명이 css_test 인것에 속한 이미지첫번째 것 찾기

$( '.css_test img:eq(' + n + ')' )  -  예제에서는 변수를 받아서 문자열 처리해 원하는것을 찾았습니다.

예제 2
마이너스 수치를 이용한 뒤에서부터 접근하기
보기
소스
<style type="text/css">
    .css_test {
        margin-top : 10px;
    }
    .css_test img {
        width : 80px;
    }
</style>

<button type="button" onclick="j_test(-1)">마지막 얼굴은 봅니다</button>
<button type="button" onclick="j_test(-2)">마지막 두번째 얼굴은 봅니다</button>
<button type="button" onclick="j_test(-3)">마지막 세번째 얼굴은 봅니다</button>
<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
    <img src="//superkts.com/img/huk1.gif" />
</div>

<script type="text/javascript">
    function j_test(n){
        $('.css_test img:eq(' + n + ')').attr('src', '//superkts.com/img/huk2.gif');

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

$( '셀렉터:eq(마이너스 숫자)' )  -  셀렉터에 해당하는 요소중 특정 뒤로부터 순서의 것을 찾습니다.
$( '셀렉터:eq(-1)' )  -  셀렉터에 해당하는 요소중 마지막것
$( '셀렉터:eq(-2)' )  -  셀렉터에 해당하는 요소중 마지막에서 두번째것

뒤에것 부터 접근 하려고 한다면 이걸 쓰세요 !
몇개 있는지 세고 최대갯수를 이용해서 접근할 필요가 없습니다.

jQuery 홈페이지 :eq API 문서 : http://api.jquery.com/eq-selector/