.end()
원문 링크 
http://api.jquery.com/end/
개요 : 현재의 연속적인 계산 명령(chain 이라고 표현된)의 종료하고 선택 집합의 이전 요소를 찾아 반환해 줍니다.
- .end()
jQuery의 DOM 탐색 함수의 대부분은 jQuery 객체 인스턴스에서 작동하고 새로운 객체를 만들어 또 다른 DOM 요소 집합을 찾습니다. 이러한 상황이 발생하면, 그것은 개체 내부에 유지되는 스택에 새로운 집합 요소가 밀고들어 가는 것처럼 됩니다. 탐색 메소드가 성공적으로 실행될 때마다 스택에 새로운 요소들이 추가됩니다. 그런데 만약 스택에 쌓여있던 기존 요소가 필요하게 된다면 어떻게 해야 할까요? 바로 end()를 사용하면 되는 것입니다.
와우, 어렵습니다. 여기서 잠깐~ 원문을 쭈욱 읽어보고 예제까지 보았는데요. 이 함수 즉, .end()란 "jQuery의 함수를 연쇄적으로(chain) 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아갈 수 있다."인 것입니다. 아~ 정리하려다가 더 어려워진듯;;;;
아래 리스트 2개를 만들어 내는 마크업을 보세요.
<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>
end() 함수는 jQuery의 체이닝(연쇄적 사용) 속성이 흐름을 끊는데 매우 실용적입니다. 연속적인(체인, chaining) 사용을 하지 않을 때, 스택을 조작하지 않고 변수명으로 앞 쪽의 객체를 호출할 수 있습니다. 다음과 같이 end() 함수는 어떤 함수와도 사용할 수 있습니다.
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');이 체인은 첫번째 리스트에 있는 'foo' 클래스 요소를 찾아서 그 내부의 배경색을 빨간색으로 바꿔줍니다. 그 다음으로 나오는 end()가 자신 앞에 나왔던 find() 함수가 찾은 객체를 반환시켜 줍니다. 그래서 두번째로 나오는 find() 함수는 >li class="foo"< 요소 안에서 찾는 것이 아닌 <ul class="first"> 안에서 '.bar' 클래스를 찾게 됩니다. 그리고 찾은 요소의 배경색을 녹색으로 바꿔주게 됩니다. 결과적으로 첫번째 리스트의 1과 3 요소의 배경색이 바뀌게 되고 두번째 리스트에는 아무런 일도 일어나지 않습니다.
위처럼 긴 문장은 잘 정리되어 있지 않으면 분석하기가 쉽지 않습니다. 그래서 아래와 같이 잘 정리하시는 것을 권고드립니다.
$('ul.first').find('.foo')
.css('background-color', 'red')
.end().find('.bar')
.css('background-color', 'green')
.end();마지막으로 나오는 .end() 함수는 jQuery 객체가 폐기되기 때문에 필요하지는 않습니다. 하지만 이런 식으로 사용하게 되면 시각적으로 안정적이 되기도 하고 한 단락이 종료되었다는 명확한 느낌을 주게 됩니다. 프로그램을 제작할 때 보기 편하고 명확한 표현이 가능하다면 성능에 무리를 주지 않는 이상 이런 형태의 함수 사용은 무난해 보입니다.
하하;; 그렇다네요. 걍 그런가보다 넘기셔도 될 듯합니다.
예 제
페이지내의 첫번째 em 태그를 찾아서 title 속성값을 알아낸다.
<!DOCTYPE html>
<html>
<head>
<style>
p, div { margin:1px; padding:1px; font-weight:bold;
font-size:16px; }
div { color:blue; }
b { color:red; }
</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<p>
Hi there <span>how</span> are you <span>doing</span>?
</p>
<p>
This <span>span</span> is one of
several <span>spans</span> in this
<span>sentence</span>.
</p>
<div>
Tags in jQuery object initially: <b></b>
</div>
<div>
Tags in jQuery object after find: <b></b>
</div>
<div>
Tags in jQuery object after end: <b></b>
</div>
<script>
jQuery.fn.showTags = function (n) {
var tags = this.map(function () {
return this.tagName;
})
.get().join(", ");
$("b:eq(" + n + ")").text(tags);
return this;
};
$("p").showTags(0)
.find("span")
.showTags(1)
.css("background", "yellow")
.end()
.showTags(2)
.css("font-style", "italic");
</script>
</body>
</html>
미리보기
으헉;; 예제가 너무 어렵습니다. 물론 예제를 위한 것이지만 정말 지저분한 코딩이네요. ^^;;; 이걸 어떻게 하나. 막 사용자 함수랑 지저분하게 짜여져 있지만 잘 보시면 아실 수 있을거예요. ^^;;
예 제
페이지의 모든 img 태그에 속성값들을 부여합니다.
<!DOCTYPE html>
<html>
<head>
<style>p { margin:10px; padding:10px; }</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<script>$("p").find("span").end().css("border", "2px red solid");</script>
</body>
</html>
미리보기
이번 예제가 더 깔끔하네요. 잘 보시면 span을 찾았지만 빨간색 테두리는 p태그에 그려진 걸 보실 수 있습니다. end() 함수 사용때문에요.
음. 이번 함수는 아주 유용해 보이지만 제 느낌은 글쎄요. 이런식으로 코드를 구성할 일이 얼마나 있을지 모르겠네요. 프레임워크 만드는거 할때나 복잡도가 높을 때 정도 사용하게 될까요? ㅎㅎ;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 첫번째 요소 찾기, first() (2) | 2011.05.24 |
|---|---|
| jQuery API 정복 - 하위 요소 전부 찾기, find() (2) | 2011.05.19 |
| jQuery API 정복 - 선택 요소 집합에서 추출하기, filter() (8) | 2011.05.12 |
| jQuery API 정복 - 인덱스로 요소 찾기, eq() (4) | 2011.05.02 |
| jQuery API 정복 - 선택된 요소만큼 루프, each() (4) | 2011.04.28 |
| jQuery API 정복 - 텍스트 노드를 포함한 자식요소 가져오기, contents() (4) | 2011.04.26 |
| jQuery API 정복 - 현재 요소에서 가장 가까운 선택 요소, closest() (1) | 2011.04.21 |
| jQuery API 정복 - 자식 요소들 찾기, children() (2) | 2011.04.07 |