.next()

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

next 메서드는 지정된 요소의 다음 요소를 찾습니다.

+_+
예제 1
기본 예제
보기


얼굴을 눌러보세요 ! 그 다음 얼굴이 '깜놀' 할겁니다.
소스
<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).next().attr( 'src', 'http://biketago.com/img/etc/huk2.gif' ); // 클릭한 것의 다음것 변경
        setTimeout(function(){ // 0.5초 후 다시 원복
            $(o).next().attr( 'src', 'http://biketago.com/img/etc/huk1.gif' );
        }, 500);
    }
</script>
관련 CSS
jQuery

- 위 예제는 클릭한 얼굴의 다음 얼굴 표정을 바꿔보는 예제입니다.

$( '셀렉터' ).next()  -  해당 셀렉터 다음것을 찾습니다.
$( '셀렉터' ).next().attr( 'src', '값' )  -  셀렉터로 찾은 다음것의 src 속성을 지정된 으로 바꿔줍니다.

예제 2
next 메서드는 동등한 관계에서 다음것을 찾습니다
보기




얼굴을 눌러보세요 ! 그 다음 얼굴이 '깜놀' 할겁니다.
빨간, 파란 네모 얼굴을 주의깊게 눌러보세요.
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 60px;
        border : 2px solid white;
    }
    .css_test img.red {
        border-color : red;
    }
    .css_test img.blue {
        border-color : blue;
    }
    .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        display : inline-block;
        padding : 3px;
    }
</style>

<div class="css_test">
    <div>
        <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 class="red" src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    </div>
    <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>
    <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 class="blue" src="http://biketago.com/img/etc/huk1.gif" onclick="j_test(this)" />
    <div>
        <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)" />
    </div>
    <br>
    <br>얼굴을 눌러보세요 ! 그 다음 얼굴이 '깜놀' 할겁니다.
    <br>빨간, 파란 네모 얼굴을 주의깊게 눌러보세요.
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).next().attr('src', 'http://biketago.com/img/etc/huk2.gif'); // 클릭한 것의 다음것 변경
        setTimeout(function(){ // 0.5초후 다시 원복
            $(o).next().attr('src', 'http://biketago.com/img/etc/huk1.gif');
        }, 500);
    }
</script>
관련 CSS
jQuery

- 빨간 얼굴을 눌러도 다음 얼굴은 표정의 변화가 없습니다.
- 파란 얼굴을 눌러도 마찬가지로 다음 얼굴의 변화가 없습니다.
- next 메서드는 동등한 관계의 것만 찾습니다. 부모나 자식 요소는 대상이 아닙니다.

심화학습 - 파란 얼굴의 설명
- 파란 얼굴에서 next 는 다음 태그인 div(회색 네모칸)을 찾습니다.
- 이 div 는 얼굴을 감싸고 있는 네모칸 입니다. 이건 src 속성을 적용해도 변화가 없습니다.
- 결론 : DIV 를 찾았지만 딱히 할 게 없었다 입니다. 찾지 못한것은 아닙니다.
- 파란 얼굴과 네모칸은 동등한 관계이니까요. (부모 자식 관계가 아닌)
- 헷갈리면 안될 부분 : 네모칸을 찾은것이지 네모칸 안의 첫번째 얼굴을 찾은게 아닙니다.



허억

예제 3
next 메소드 여러개를 사용한다면?
보기


얼굴을 눌러보세요 ! 그 다음 다음 얼굴이 '깜놀' 할겁니다.
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 60px;
    }
    .css_test div {
        border-radius : 5px;
        border : 5px solid gray;
        display : inline-block;
        padding : 5px;
    }
</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).next().next().attr('src', 'http://biketago.com/img/etc/huk2.gif'); // 클릭한 것의 다음것 변경
        setTimeout(function(){ // 0.5초후 다시 원복
            $(o).next().next().attr('src', 'http://biketago.com/img/etc/huk1.gif');
        }, 500);
    }
</script>
관련 CSS
jQuery

$( '셀렉터' ).next().next()  -   셀렉터로 찾은 요소의 다음 다음것 찾기
$( '셀렉터' ).next().next().next() ...

+ 관련 jQuery +
jQuery 홈페이지 .next() API 문서 : https://api.jquery.com/next/