[Traversing] JQ - end() 메서드 - 현재 체인에서 가장 최근의 필터링 작업을 끝내고 일치 요소집합을 이전 상태로 되돌리기 (= end메서드 = 엔드 메서드)

1. end() 예제 - 최근 적용 필터링 해제 후, 이전 상태로 되돌리기
2. end() 정의
3. end() 구문

end() 예제 - 최근 적용 필터링 해제 후, 이전 상태로 되돌리기

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){  

        $( "ul.front" )

        .find( ".html" )

        .css( "background-color", "yellow" )

        .end()

        .find( ".js" )

        .css( "background-color", "pink" );

    });

});    

</script>

<ul class="front">

  <li class="html">HTML</li>

  <li>CSS</li>

  <li class="js">JS</li>

</ul>

<ul class="back">

  <li class="php">PHP</li>

  <li>SQL</li>

  <li class="server">서버관리</li>

</ul>

<button>클릭</button>

 

결과보기

---

cf1. end() 메서드 없는 경우

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){  

        $( "ul.front" )

        .find( ".html" )

        .css( "background-color", "yellow" )

        .find( ".js" )

        .css( "background-color", "pink" );

    });

});    

</script>

<ul class="front">

  <li class="html">HTML</li>

  <li>CSS</li>

  <li class="js">JS</li>

</ul>

<ul class="back">

  <li class="php">PHP</li>

  <li>SQL</li>

  <li class="server">서버관리</li>

</ul>

<button>클릭</button>

 

결과보기

---

cf2. 마지막 필터링 뒤에도 end() 메서드 사용 시

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){  

        $( "ul.front" )

        .find( ".html" )

        .css( "background-color", "yellow" )

        .end()

        .find( ".js" )

        .css( "background-color", "pink" )

        .end();

    });

});    

</script>

<ul class="front">

  <li class="html">HTML</li>

  <li>CSS</li>

  <li class="js">JS</li>

</ul>

<ul class="back">

  <li class="php">PHP</li>

  <li>SQL</li>

  <li class="server">서버관리</li>

</ul>

<button>클릭</button>

 

결과보기 

end() 정의

 

현재 체인에서 가장 최근의 필터링 작업을 끝내고 일치하는 요소집합을 이전 상태로 되돌리기.

 

---

 

1.

마침표(.) 이용한 체인(=연결) 방식 사용할 때 아주 유용함.

 

2.

마지막 필터링 뒤엔 end() 메서드 추가 불필요.

추가 시, 가독성엔 도움 되나, 성능엔 마이너스. 

 

3. 예제 더 보기

https://api.jquery.com/end/

 

end() 구문

 

a.end().b

 

PS.

• a: 필수. 가장 최근 적용된 필터링
• b: 선택. 새로 적용할 필터링

---

[매개변수]

 

없음.