.prev()

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

prev 메서드는 지정된 요소 기준으로 동등한 앞 요소를 찾습니다.

+_+
예제 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).prev().attr( 'src', 'http://biketago.com/img/etc/huk2.gif' ); // 클릭한 것의 다음것 변경
        setTimeout(function(){ // 0.5초 후 다시 원복
            $(o).prev().attr( 'src', 'http://biketago.com/img/etc/huk1.gif' );
        }, 500);
    }
</script>
관련 CSS
jQuery

- 이 예제는 클릭한 얼굴의 이전 얼굴 표정을 바꿔보는 예제입니다.
- 첫 번째 얼굴은 이전에 해당하는것이 없습니다.

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

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




얼굴을 눌러보세요 ! 그 앞의 얼굴이 '깜놀' 할겁니다.
위의 네모칸 밖의 처음 얼굴과, 아래 네모칸 안쪽 첫번째 얼굴을 주의깊게 눌러보세요.
빨간색 네모 얼굴은 눌러도 앞의 얼굴이 반응하지 않습니다.
소스
<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;
    }
    .css_test .notice {
        border : 1px solid red;
    }
</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 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)" class="notice" />
    <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 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)" class="notice" />
        <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>위의 네모칸 밖의 처음 얼굴과, 아래 네모칸 안쪽 첫번째 얼굴을 주의깊게 눌러보세요.
    <br>빨간색 네모 얼굴은 눌러도 앞의 얼굴이 반응하지 않습니다.
</div>

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

- 위쪽 빨간 네모칸 얼굴은 눌러도 앞쪽의 얼굴은 표정의 변화가 없습니다.
- 아래쪽 빨간 네모칸 얼굴을 눌러도 앞쪽의 얼굴도 변화가 없습니다.
- 이렇게 prev 메서드는 동등한 관계의 것만 찾습니다. 부모나 자식 요소는 대상이 아닙니다.

심화학습
- 위쪽 빨간 네모칸의 얼굴에서 prev 는 동등한 위치의 이전 태그인 div(회색 네모칸)을 찾습니다.
- 이 div 는 얼굴들을 감싸고 있는 회색 네모칸 인데요 src 속성을 적용해도 변화가 없습니다.
- 결론 : DIV 를 찾았지만 딱히 할 게 없었다 입니다. 찾지 못한것은 아닙니다.
- 빨간 네모 이미지와 그 이전의 네모칸은 동등한 관계이니까요.
- 헷갈리면 안될 부분 : 네모칸(DIV)을 찾은것이지 네모칸 안의 마지막 얼굴을 찾은것이 아닙니다.

- 아랫쪽 빨간 네모칸의 얼굴기준으로 prev 메서드는 아무것도 찾지 않습니다.



허억

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


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

- 첫번째 두번째 얼굴은 찾을 대상이 없습니다.

$( '셀렉터' ).prev().prev()  -   셀렉터로 찾은 요소의 이전 이전것 찾기
$( '셀렉터' ).prev().prev().prev() ...

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