1.7.변경하기 전으로 돌아가기 .end()

이전에는 필터링을 해서 요소를 선택하는 방법을 알아 봤습니다.
때로는 filter() 이나 find()를 사용하기 전으로 돌아가야 할 때가 있습니다. 즉, 이전 상황으로 되돌릴수 있는 방법이 필요합니다.
이런 역활을 하는것이 바로 end() 입니다.

먼저 end() 문법을 보세요. 

end()

jQuery 커멘트 체인에서 사용하여 이전 확장 집합으로 돌아간다.

매개변수 : 없음.
반환값 : 이전 확장 집합. 


예를들어 아래와 같은 구문이 있다고 가정합니다.

$('img').clone().appentTo('#test1').end().addClass('.test2');

이것은 img 를 복사(clone)하여 아이디 test1를 추가(appendTo) 합니다.
그런다음 end()가 나오기 때문에 복사(clone)하기전으로 돌아가서 img 를 선택합니다. 그 img에 클래스(test2)를 추가 (addClass) 합니다. 
만약 end() 가 없었다면 test1아이디를 추가하고 바로 test2 클래스도 추가합니다.

이해를 돕기위해 아래의 예제코드를 보세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>text</p>
<p class="middle">Middle <span>text</span></p>
<p>text</p>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
	alert(jQuery('p').filter('.middle').length); //1을 출력
	alert(jQuery('p').filter('.middle').end().length); //3을 출력
	alert(jQuery('p').filter('.middle').find('span').end().end().length); //3을 출력
</script>
</body>
</html>

첫번째 구문은 모든 곳에서 p를 검색하고 p에 대해서 클래스 middle 가 있는것만 골라냅니다. 그런다음 .length를 써서 몇개가 있는지 alert 창을 사용하여 확인합니다.
위의 예제에서는 p는 3개가 있지만 middle 라는 클래스를 가지고 있는 p는 하나밖에 없지요. 그래서 1을 출력합니다.



두번째 구문은 middle 클래스를 가지고 잇는 p를 필터링하는 것까지는 같지만 end() 를 사용하여 필터링(filter)하기 전으로 다시 돌아가서 length를 수행합니다. 그래서 총 3개인 p를 찾아 3을 출력합니다. 



마지막 3번째 구문은 end()를 두번사용해서 filter() 과 find() 로 변경되기 전으로 돌아갑니다. 그래서 원래의 p 래퍼집합을 반환합니다.


 
위 예제 파일의 결과는 여기를 클릭해서 확인해 보세요.
개    개