jQuery 공작소 : .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="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <br>
    <br>얼굴을 눌러보세요 ! 그 다음 얼굴이 '깜놀' 할겁니다.<br>
</div>

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

관련 CSS

cursortext-alignwidth

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

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

관련 CSS

borderborder-colorborder-radiuscursordisplaypaddingtext-alignwidth

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="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <br>
    <br>얼굴을 눌러보세요 ! 그 다음 다음 얼굴이 '깜놀' 할겁니다.<br>
</div>

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

관련 CSS

borderborder-radiuscursordisplaypaddingtext-alignwidth

jQuery

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

+ 관련 jQuery +

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

☞ 목록으로 가기