jQuery 공작소 : .last()

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

last 메서드는 지정한 셀렉터에 해당하는 마지막 요소를 찾습니다.

예제 1
기본 예제
보기
제일 마지막의 "CSS 공작소" 를 선택합니다.

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

제일 <b>마지막</b>의 "CSS 공작소" 를 선택합니다.<br><br>
<button type="button" onclick="$('.css_test div').last().css('border-color','red')">눌러보세용</button>
<button type="button" onclick="$('.css_test div').last().css('border-color','')">다시하기</button>

<div class="css_test">
    <div>CSS 공작소</div>
    <div>CSS 공작소</div>
    <div>CSS 공작소</div>
</div>
관련 CSS
jQuery

$( '.css_test  div' ).last()  -  클래스명이 css_test 인것의 div 중 마지막 것을 찾습니다.
$( '.css_test  div' ).last().css( 'border-color', 'red' )  -  마지막 div 의 테두리색을 빨간색으로 바꾸기.

예제 2
응용 예제
보기
맨 뒤의 사람부터 내보내기
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        padding : 7px;
    }
    .css_test img {
        position : relative;
    }
</style>

맨 뒤의 사람부터 내보내기<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" />
</div>

<script type="text/javascript">
    function j_test(){
        // 보기 편하게 여러줄로 코딩
        $( '.css_test img' )
        .last()
        .attr( 'src', '//superkts.com/img/huk2.gif') // 얼굴 표정 바꾸기
        .animate( {left:'+=150', 'opacity':0 }, 500, function(){
            $(this).remove();
        } );
    }
</script>
관련 CSS
jQuery

$( '.css_test  img' ).last().animate( { left : '+=150', 'opacity' : 0 }, 500, function(){
        $(this).remove();
} );

해당 셀렉터의 마지막 이미지를 찾아서 오른쪽으로 150px 이동시킴과 동시에 투명해 지도록 만들고
애니메이션이 끝나면 해당 이미지를 삭제합니다.

관련 메서드 : .animate(), .remove()

예제 3
위 응용예제의 기능 개선판
보기
이전 예제는 버튼을 연타해도 마지막 이미지가 사라지기 전까지 다른 이미지는 움직이지 않습니다.
버튼을 누르면 움직이는 이미지는 .last() 에 해당하고 다시 버튼을 누르더라도
그 움직이고 있는 이미지에 효과가 적용되므로 사라지기 전까지 다른 이미지는 반응하지 않게되죠.
그럼 이번엔 버튼을 누를때 마다 반응하게 해볼까요. ㅎㅎ



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

이전 예제는 버튼을 연타해도 마지막 이미지가 사라지기 전까지 다른 이미지는 움직이지 않습니다.<br>
버튼을 누르면 움직이는 이미지는 .last() 에 해당하고 다시 버튼을 누르더라도<br>
그 움직이고 있는 이미지에 효과가 적용되므로 사라지기 전까지 다른 이미지는 반응하지 않게되죠.<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" /><br>
    <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" /><br>
    <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:not(:animated)' ) // 움직이지 않는 이미지만 찾기 !!
        .last()
        .attr( 'src', '//superkts.com/img/huk2.gif') // 얼굴 표정 바꾸기
        .animate( {left:'+=150', 'opacity':0 }, 500, function(){
            $(this).remove();
        } );
    }
</script>
관련 CSS
jQuery
$( '.css_test  img:not(:animated)' )
- 클래스명이 css_test 인 요소의 이미지애니메이션 되지 않는것 찾기
- 이 셀렉터를 이용하면 버튼을 누를때 마다 이미지를 움직이게 할 수 있습니다. (연타모드 ON)
예제 4
:last 셀렉터와 비교해 보기
보기
:last 셀렉터와 비교해 볼까요? 결과는 같습니다.

소스
<style type="text/css">
    .css_test input {
        border-radius : 5px;
        border : 3px solid gray;
        margin-top : 10px;
        padding : 7px;
        width : 300px;
    }
    .css_test img {
        margin-top : 10px;
        width : 150px;
        cursor : pointer;
    }
</style>

<b>:last</b> 셀렉터와 비교해 볼까요? 결과는 같습니다.<br><br>
<button type="button" onclick="j_test( $('.css_test img').last() )">$( '셀렉터 img' ).last()</button>
<button type="button" onclick="j_test( $('.css_test img:last') )">$( '셀렉터 img:last' )</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" />
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).attr( 'src', '//superkts.com/img/huk2.gif' );
        setTimeout(function(){
            $(o).attr( 'src', '//superkts.com/img/huk1.gif' ); // 2초후 원래대로
        }, 1000);
    }
</script>
관련 CSS
+ 관련 jQuery +
jQuery 홈페이지 .last() API 문서 : http://api.jquery.com/last/