jQuery 루프 - end() 메서드
예제
모든 구절을 선택하고, 이 구절 내의 span 요소를 찾아 이를 구절로 되돌려서 구절을 두 픽셀의 빨간 경계선으로 설정합니다:
$("p").find("span").end().css("border", "2px red solid");
정의와 사용법
end() 메서드는 현재 체인에서 가장 가까운 필터링 작업을 종료하고, 일치하는 요소 집합을 이전 상태로 되돌립니다.
문법
.end()
세부 설명
대부분의 jQuery 루프 메서드는 jQuery 객체 인스턴스를 처리하고 다른 DOM 요소 집합에 대한 새로운 객체를 생성합니다. 이런 상황이 발생하면 새로운 요소 집합을 객체 내에 유지하는 스택에 넣어야 합니다. 성공적인 필터링 메서드 호출은 항상 새로운 요소를 스택에 넣습니다. 기존 요소 집합이 필요하면 end() 메서드를 사용하여 스택에서 새로운 집합을 푸시할 수 있습니다.
페이지에 짧은 목록 쌍이 있는 경우를 가정해 보겠습니다:
<ul class="first"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul> <ul class="second"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul>
예제 1
주로 jQuery의 체인 속성(명령 체인)을 사용할 때, jQuery는 매우 유용합니다. 명령 체인을 사용하지 않으면 일반적으로 이전 객체를 호출하기 위해 변수 이름을 사용합니다. 따라서 스택을操作하지 않아도 됩니다. 그러나 end()를 사용하면 모든 메서드 호출을 연속적으로 할 수 있습니다:
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
이 명령 라인은 첫 번째 목록에서 클래스 이름이 foo인 요소를 검색하고, 그들의 배경을 빨간색으로 설정합니다. end()는 객체를 find() 호출 전의 상태로 되돌립니다. 따라서 두 번째 find()는 <ul class="first"> 내의 '.bar'을 검색하며, 목록의 <li class="foo">에서 검색하지 않습니다. 그리고 일치하는 요소의 배경을 녹색으로 설정합니다. 마지막 결과는 첫 번째 목록의 1번과 3번 요소가 색상이 설정된 배경으로 변경되고, 두 번째 목록의 요소에는 어떤 변화도 없습니다.
예제 2
이 긴 jQuery 라인은 구조화된 코드 블록으로 시각화될 수 있으며, 선택 메서드는 중첩된 코드 블록을 열고, end() 메서드는 코드 블록을 닫습니다:
$('ul.first').find('.foo')
.css('background-color', 'red')
.end().find('.bar')
.css('background-color', 'green')
.end();
마지막에 end()는 필수가 아닙니다. 왜냐하면 나중에 jQuery 객체를 버릴 것입니다. 그러나 이런 형식으로 코드를 작성하면, end()는 시각적 대칭을 제공하고, 프로그램을 정리하는 느낌을 줍니다. 최소한 개발자에게는 더 쉽게 읽을 수 있습니다. 물론 추가적인 호출로 인해 일정한 성능 손실이 발생합니다.
