jQuery 공작소 : .end()

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

end 메서드는 최근 필터링을 끝내고 처음부터 다시 대상으로 합니다.
설명이 좀 어렵군요. 예제는 쉬우니 한번 살펴봅시다 ^^

예제 1
기본 예제
보기
.find( '.cat' ).addClass( 'on' )
.find( '.dog' ).addClass( 'on' )
.find( '.dog' ).addClass( 'on' ).find( '.cat' ).addClass( 'on' )
.find( '.dog' ).addClass( 'on' ).end().find( '.cat' ).addClass( 'on' )
.find( '.dog , .cat' ).addClass( 'on' )

실행3, 실행4를 주의깊게 비교해 보세요~!
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test span {
        display : inline-block;
        border-radius : 5px;
        border : 4px solid gray;
    }
    .css_test .cat {
        padding : 18px 10px 0 10px;
    }
    .css_test .cat.on {
        border-color : red;
        box-shadow : 0 0 5px red;
    }
    .css_test .dog.on {
        border-color : blue;
        box-shadow : 0 0 5px blue;
    }
</style>

<button type="button" onclick="$('.css_test').find('.cat').addClass('on'); j_test();">실행1</button> .find( '.cat' ).addClass( 'on' )<br>
<button type="button" onclick="$('.css_test').find('.dog').addClass('on'); j_test();">실행2</button> .find( '.dog' ).addClass( 'on' )<br>
<button type="button" onclick="$('.css_test').find('.dog').addClass('on').find('.cat').addClass('on'); j_test();">실행3</button> .find( '.dog' ).addClass( 'on' ).find( '.cat' ).addClass( 'on' )<br>
<button type="button" onclick="$('.css_test').find('.dog').addClass('on').end().find('.cat').addClass('on'); j_test();">실행4</button> .find( '.dog' ).addClass( 'on' )<b>.end()</b>.find( '.cat' ).addClass( 'on' )<br>
<button type="button" onclick="$('.css_test').find('.dog, .cat').addClass('on'); j_test();">실행5</button> .find( '.dog , .cat' ).addClass( 'on' )<br><br>
<b>실행3, 실행4를 주의깊게 비교해 보세요~!</b>

<div class="css_test mt20">
    <span class="cat"><img src="//superkts.com/img/css/cat051.gif" /></span>
    <span class="dog"><img src="//superkts.com/img/css/dog061.gif" /></span>
    <span class="dog"><img src="//superkts.com/img/css/dog061.gif" /></span>
    <span class="cat"><img src="//superkts.com/img/css/cat051.gif" /></span>
    <span class="dog"><img src="//superkts.com/img/css/dog061.gif" /></span>
    <span class="cat"><img src="//superkts.com/img/css/cat051.gif" /></span>
</div>

<script type="text/javascript">
    function j_test(){
        setTimeout(function(){
            $('.css_test span').removeClass('on'); // on 클래스 없애기
        }, 500);
    }
</script>
관련 CSS
jQuery
.find( '.dog' ).addClass( 'on' ).find( '.cat' ).addClass( 'on' )
- 클래스명이 dog 인것을 찾아서 on 클래스를 추가해 줍니다.
- 클래스명이 cat 인것을 찾지만 앞의 필터의 결과로 dog 클래스에서 cat 을 찾으므로 결과가 없습니다.

.find( '.dog' ).addClass( 'on' ).end().find( '.cat' ).addClass( 'on' )
- 클래스명이 cat 인것을 찾습니다.
- end 메서드로 인해 앞에서 나온 dog 클래스명 필터링 결과에 상관없이 초기화된 상태로 cat 클래스를 찾습니다.
- end 메서드를 사용하면 기존 필터링에 영향을 받지 않으므로 다시한번 원하는 것을 찾을 수 있습니다.

- 하지만 위 처럼 사용할 목적이라면 아래 코딩이 더 간단합니다.
.find( '.dog , .cat' ).addClass( 'on' )
jQuery 홈페이지 .end() API 문서 : http://api.jquery.com/end/