jQuery 공작소 : :gt

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

:gt 셀렉터는 해당하는 요소중 지정한 순서 보다 큰것을 찾습니다.
순서는 0 부터 시작합니다. 그리고 지정한 순서는 포함하지 않습니다.
gt 는 Greater Than, 뭐뭐 보다 큰것 입니다.

예제 1
기본 예제
보기
버튼을 눌러보세요.
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 7px;
        margin-top : 20px;
    }
    .css_test img {
        position : relative;
        width : 80px;
    }
</style>

버튼을 눌러보세요.<br>
<button type="button" onclick="j_test('0')">gt(0)</button>
<button type="button" onclick="j_test('1')">gt(1)</button>
<button type="button" onclick="j_test('2')">gt(2)</button>
<button type="button" onclick="j_test('3')">gt(3)</button>
<button type="button" onclick="j_test('4')">gt(4)</button>
<button type="button" onclick="j_test('5')">gt(5)</button>

<div class="css_test">
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">
    function j_test(n){
        // gt 메서드와 함께 현재 반응하지 않는 얼굴만 대상으로 애니메이션
        $( '.css_test img:gt(' + n + '):not(:animated)' ).animate({top:'-=50'}, 100).animate({top:'+=50'}, 200);
    }
</script>
관련 CSS
jQuery

$( '셀렉터:gt(숫자)' )  -  기본 사용예
$( '.css_test  img:gt(0)' )  -  클래스명이 css_test 인 요소안의 이미지중 순서가 0 보다 큰것을 찾습니다.
- 순서는 0 부터 시작합니다. 0 보다 큰것은 순서 1에 해당하므로 두번째 것을 찾습니다.

$( '.css_test  img:gt(2'):not(:animated)' )
- 클래스명이 css_test 인 요소안의 이미지순서가 2번째 보다 큰것중 현재 애니메이션 되지 않는것을 찾아라!
- 이렇게 하면 버튼을 연타하더라도 애니메이션 중인 대상은 포함하지 않으므로 오작동을 방지 할 수 있습니다.

예제 관련 메소드 : .animate()

예제 2
기본 예제의 실수
보기
여러 버튼을 연타해보세요.
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 7px;
        margin-top : 20px;
    }
    .css_test img {
        position : relative;
        width : 80px;
    }
</style>

여러 버튼을 연타해보세요.<br>
<button type="button" onclick="j_test('0')">gt(0)</button>
<button type="button" onclick="j_test('1')">gt(1)</button>
<button type="button" onclick="j_test('2')">gt(2)</button>
<button type="button" onclick="j_test('3')">gt(3)</button>
<button type="button" onclick="j_test('4')">gt(4)</button>
<button type="button" onclick="j_test('5')">gt(5)</button>

<div class="css_test">
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">
    function j_test(n){
        // gt 메서드와 함께 현재 반응하지 않는 얼굴만 대상으로 애니메이션
        $( '.css_test img:gt(' + n + ')' ).animate({top:'-=50'}, 500).animate({top:'+=50'}, 700);
    }
</script>
관련 CSS
jQuery
- 버튼을 연타 후 그만 두어도 얼굴들이 계속 움직입니다.
예제 3
기본 예제의 실수 2, stop 메서드를 사용하면 어떻게 될까
보기
여러 버튼을 연타해보세요.
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 7px;
        margin-top : 20px;
    }
    .css_test img {
        position : relative;
        width : 80px;
    }
</style>

여러 버튼을 연타해보세요.<br>
<button type="button" onclick="j_test('0')">gt(0)</button>
<button type="button" onclick="j_test('1')">gt(1)</button>
<button type="button" onclick="j_test('2')">gt(2)</button>
<button type="button" onclick="j_test('3')">gt(3)</button>
<button type="button" onclick="j_test('4')">gt(4)</button>
<button type="button" onclick="j_test('5')">gt(5)</button>

<div class="css_test">
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">
    function j_test(n){
        // gt 메서드와 함께 현재 반응하지 않는 얼굴만 대상으로 애니메이션
        $( '.css_test img:gt(' + n + ')' ).stop().animate({top:'-=50'}, 500).animate({top:'+=50'}, 700);
    }
</script>
관련 CSS
jQuery

- stop 메서드를 사용하면 진행중인 애니메이션을 멈출 수 있습니다.
- 그래서 사용해 보았는데 더 이상하게 되어버립니다.
- 애니메이션이 2개 이상 사용되었기 때문인데요. 첫번째 예제처럼 :not() 셀렉터로 간단히 해결이 됩니다.
- 제이쿼리는 적절한 셀렉터의 사용이 이상 입니다.

관련 메서드 : .stop()

예제 4
마이너스 수치를 사용하기
보기
버튼을 눌러보세요.
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 7px;
        margin-top : 20px;
    }
    .css_test img {
        position : relative;
        width : 80px;
    }
</style>

버튼을 눌러보세요.<br>
<button type="button" onclick="j_test('-1')">gt(-1)</button>
<button type="button" onclick="j_test('-2')">gt(-2)</button>
<button type="button" onclick="j_test('-3')">gt(-3)</button>
<button type="button" onclick="j_test('-4')">gt(-4)</button>
<button type="button" onclick="j_test('-5')">gt(-5)</button>
<button type="button" onclick="j_test('-6')">gt(-6)</button>

<div class="css_test">
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
    <img src="//superkts.com/img/css/huk.gif" />
</div>

<script type="text/javascript">
    function j_test(n){
        // gt 메서드와 함께 현재 반응하지 않는 얼굴만 대상으로 애니메이션
        $( '.css_test img:gt(' + n + '):not(:animated)' ).animate({top:'-=50'}, 100).animate({top:'+=50'}, 200);
    }
</script>
관련 CSS
jQuery

쉽게 이해하기
- 마이너스 수치 사용시 -1 부터 시작하여 에서 순서대로 번호를 매겨봅니다.
- 여섯개가 있다면 맨뒤는 -1 그리고 맨 앞은 -6 이 되겠죠. (예제 에서는 오른쪽 끝부터 -1 로 시작)
- 이때 gt(-6) 이라면 -6 보다 큰, 즉 -5 부터 선택이 되겠죠. (위 예제의 해당 버튼을 눌러보세요)
- gt(-1) 이라면? 가상으로 매겨본 번호에서 -1 보다 큰 값은 없습니다. 그러므로 아무것도 선택되지 않습니다.
- 이렇게 생각하고 예제의 버튼을 눌러봅시다 ^^

+ 관련 jQuery +
jQuery 홈페이지 :gt API 문서 : http://api.jquery.com/gt-selector/