$( '셀렉터:gt(숫자)' ) - 기본 사용예
$( '.css_test img:gt(0)' ) - 클래스명이 css_test 인 요소안의 이미지중 순서가 0 보다 큰것을 찾습니다.
- 순서는 0 부터 시작합니다. 0 보다 큰것은 순서 1에 해당하므로 두번째 것을 찾습니다.
$( '.css_test img:gt(2'):not(:animated)' )
- 클래스명이 css_test 인 요소안의 이미지중 순서가 2번째 보다 큰것중 현재 애니메이션 되지 않는것을 찾아라!
- 이렇게 하면 버튼을 연타하더라도 애니메이션 중인 대상은 포함하지 않으므로 오작동을 방지 할 수 있습니다.
예제 관련 메소드 : .animate()
- stop 메서드를 사용하면 진행중인 애니메이션을 멈출 수 있습니다.
- 그래서 사용해 보았는데 더 이상하게 되어버립니다.
- 애니메이션이 2개 이상 사용되었기 때문인데요. 첫번째 예제처럼 :not() 셀렉터로 간단히 해결이 됩니다.
- 제이쿼리는 적절한 셀렉터의 사용이 반 이상 입니다.
관련 메서드 : .stop()
쉽게 이해하기
- 마이너스 수치 사용시 -1 부터 시작하여 뒤에서 순서대로 번호를 매겨봅니다.
- 여섯개가 있다면 맨뒤는 -1 그리고 맨 앞은 -6 이 되겠죠. (예제 에서는 오른쪽 끝부터 -1 로 시작)
- 이때 gt(-6) 이라면 -6 보다 큰, 즉 -5 부터 선택이 되겠죠. (위 예제의 해당 버튼을 눌러보세요)
- gt(-1) 이라면? 가상으로 매겨본 번호에서 -1 보다 큰 값은 없습니다. 그러므로 아무것도 선택되지 않습니다.
- 이렇게 생각하고 예제의 버튼을 눌러봅시다 ^^