jQuery 공작소 : .nextAll()

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

nextAll 메서드는 지정한 셀렉터 이후의 모든것을 반환합니다.

예제 1
지정한 순서의 이미지 이후부터 전부 찾기
보기
군대 내무반 입니다. 분대장이 화가났네요.
왼쪽부터 계급이 높습니다.

소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
</style>


군대 내무반 입니다. 분대장이 화가났네요.<br>
왼쪽부터 계급이 높습니다.<br><br>

<button type="button" onclick="j_test()">내 밑으로 전부 주목 !!</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">
    <img src="//superkts.com/img/huk1.gif">
    <img src="//superkts.com/img/huk1.gif">
    <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(){
        // 보기 편하게 여러줄로 코딩
        $( '.css_test img' )
        .eq(2) // 세번째 이미지 (0 부터 시작)
        .nextAll() // 이후 전부
        .attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
        
        setTimeout(function(){
            $( '.css_test img' ).attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
        }, 500);
    }

</script>
관련 CSS
jQuery
$( '.css_test  img' ).eq( 2 ).nextAll()
- 클래스명이 css_test 인 요소의 이미지인덱스 두번째 이후의 모든것 찾기
- 인덱스는 0 부터 시작이므로 3번째이후 즉 4번째 부터 대상입니다.
예제 2
유사 메서드
jQuery
- 지정한것 이후의 하나만 찾는 메서드 : .next()
예제 3
nextAll 메서드와 prevAll 메서드를 사용한 예제
보기
얼굴을 눌러보세요.

소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
</style>


얼굴을 눌러보세요.<br><br>

<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">
    <img src="//superkts.com/img/huk1.gif">
    <img src="//superkts.com/img/huk1.gif">
    <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">

    $( '.css_test img' ).bind('click', function(){ j_test(this) }).css( 'cursor', 'pointer' );

    function j_test(o){
        // 보기 편하게 여러줄로 코딩
        $(o)
        .nextAll() // 이후 전부
        .add( $(o).prevAll() ) // 이전 전부도 추가시킴
        .attr( 'src', '//superkts.com/img/huk2.gif' ); // 표정바꾸기

        setTimeout(function(){
            $( '.css_test img' ).attr( 'src', '//superkts.com/img/huk1.gif' ); // 표정되돌리기
        }, 500);
    }

</script>
관련 CSS
jQuery
.add( $( o ).prevAll() )  -  add 메서드를 사용해서 prevAll 도 추가시켜 주었습니다.

참고 메서드 : .add()
jQuery 홈페이지 .nextAll() API 문서 : http://api.jquery.com/nextAll/