.nextUntil()

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

nextUntil 메서드는 지정한것 이후부터 이전까지 대상으로 찾습니다.

+_+
예제 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="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">
    <img src="http://biketago.com/img/etc/huk1.gif">
    <img src="http://biketago.com/img/etc/huk1.gif">
</div>

<script type="text/javascript">

    function j_test(){
        // 보기 편하게 여러줄로 코딩
        $( '.css_test img:eq(1)' )
        .nextUntil( $( '.css_test img:eq(-1)' ) ) // 지정한것 이전까지 전부
        .attr('src', 'http://biketago.com/img/etc/huk2.gif'); // 표정바꾸기
        
        setTimeout(function(){
            $( '.css_test img' ).attr('src', 'http://biketago.com/img/etc/huk1.gif'); // 표정되돌리기
        }, 500);
    }

</script>
관련 CSS
jQuery
$( '.css_test  img:eq(1)' ).nextAll( $( '.css_test img:eq(-1)' ) )
- 클래스명이 css_test 인 요소의 두번째 이미지 이후부터 마지막 이미지 전까지 모든것 찾기
- 인덱스는 0 부터 시작이므로 두번째 이후 즉 3번째 부터 대상입니다.

참고 메서드 : .eq()
예제 2
애니메이션 효과 적용해보기
보기
위 예제를 개와 고양이 점프하기로 바꿔보았습니다.

소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
    .css_test img {
        position : relative; /* 애니메이션 효과 적용을 위해 적용 */
    }
</style>

위 예제를 개와 고양이 점프하기로 바꿔보았습니다.<br><br>

<button type="button" onclick="j_test()">점프 !!</button>

<div class="css_test">
    <img src="http://superkts.com/img/css/dog061.gif">
    <img src="http://superkts.com/img/css/cat051.gif">
    <img src="http://superkts.com/img/css/dog061.gif">
    <img src="http://superkts.com/img/css/cat051.gif">
    <img src="http://superkts.com/img/css/dog061.gif">
    <img src="http://superkts.com/img/css/cat051.gif">
    <img src="http://superkts.com/img/css/dog061.gif">
    <img src="http://superkts.com/img/css/cat051.gif">
</div>

<script type="text/javascript">

    function j_test(){
        // 보기 편하게 여러줄로 코딩
        $( '.css_test img:eq(1)' )
        .nextUntil( $( '.css_test img:eq(-1)' ) ) // 지정한것 이전까지 전부
        .animate({top:-50}, 200, function(){ // 점프효과
            $(this).animate({top:0}, 300);
        })
    }

</script>
관련 CSS
예제 3
얼굴 놀래키기
보기


얼굴을 눌러보세요 ! 그 다음 모든 얼굴이 '깜놀' 합니다..
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 70px;
    }
</style>

<div class="css_test">
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <img src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <br>
    <br>얼굴을 눌러보세요 ! 그 다음 모든 얼굴이 '깜놀' 합니다..<br>
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).nextAll().attr( 'src', 'http://biketago.com/img/etc/huk2.gif' ); // 클릭한 것의 다음것 변경
        setTimeout(function(){ // 0.5초 후 다시 원복
            $(o).nextAll().attr( 'src', 'http://biketago.com/img/etc/huk1.gif' );
        }, 500);
    }
</script>
관련 CSS
예제 4
참고하면 좋은 비슷한 메서드
jQuery
jQuery 홈페이지 .nextUntil() API 문서 : http://api.jquery.com/nextUntil/