.andSelf() 함수는 기존에 선택된 요소에 신규로 선택된 요소들을 스택(stack) 구조로 추가할 수 있습니다.
원문 링크 
http://api.jquery.com/andSelf/
- .andSelf()
.end()함수 소개 때에 다시 다루겠지만, jQuery 객체는 매칭되는 요소들의 집합의 구조가 스택(stack)구조로 되어 있습니다. DOM을 검색하는 함수를 사용하면 신규 매칭 요소 집합은 스택 구조로 구성이 됩니다. 만일 이전에 구성되어 있는 요소집합에 이어붙이기를 하시길 원하면 .andSelf함수를 사용하시면 됩니다.
jQuery 얘기 중에 스택이 나올 줄은 몰랐네요. ^^;; 먼저 스택에 대해 간단하게 소개드리겠습니다. 스택이란 자료구조의 한 부분입니다. 자료구조란 하하;; 자료가 구성되어 있는 모습정도로 하면 될까요. 아주 쉬운 예를 보면, 이런 말 쉽게 들어보셨을 겁니다. 선입선출. 먼저 들어온 것이 먼저 나간다. 하지만 스택은 그렇지 않습니다. 나중에 들어 온것이 먼저 나간다 입니다. 이런 구조가 되려면 아랫쪽부터 차근차근 책을 쌓듯이 자료들이 쌓여 있게 되는 겁니다. 스택의 구조가 그런거죠. 하핫...
더 나은 자료를 보시려면 아래 링크를 보세요. 제가 생각하기에는 꼭 보셨으면 합니다.
윤상배 님의 stack 자료 구조
텀즈넷의 stack
아래의 리스트를 구성하는 간단한 마크업을 보시죠.
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
3번째 리스트 뒤에 4,5번째 리스트를 이어붙이고 배경색을 빨간색으로 하시려면 아래와 같은 스크립트가 필요합니다.
$('li.third-item').nextAll().andSelf()
.css('background-color', 'red');먼저 세번째 아이템이 선택되어 집합요소를 구성하게 됩니다. 그 뒤로 .nextAll() 함수에 의해 선택된 네번째, 다섯번째 요소 집합이 구성되게 됩니다. 마지막으로 andSelf() 함수로 인하여 2개의 집합요소가 결합(merge) 되게 됩니다. 3개의 요소로 구성된 집합 요소인 jQuery 객체가 생성됩니다. 구성 순서는 {[<li.third-item>,<li>,<li> ]} 와 같습니다.
예 제
div 요소를 찾고 그 안의 p 요소를 찾아서 결합한 후 빨간 테두리를 그려준다. 그 다음은 div 요소에 있는 p 태그들만 선택하여 노란색 배경색을 채워 넣는다.
<!DOCTYPE html>
<html>
<head>
<style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
.background { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
</script>
</body>
</html>
미리보기
스크립트에 약간의 차이가 있지만 그 결과는 아주 다릅니다. $("div").find("p").andSelf().addClass("border"); 스크립트는 div 와 p 태그 모두에 빨간 테두리가 그려졌지만 그 아래 스크립트인 $("div").find("p").addClass("background"); 는 p 태그들만 노란색 배경색이 그려집니다.
이것의 차이점이 느껴지시나요? andSelf() 함수는 이전의 add() 함수와 같은 기능을 하는 것처럼 보입니다만 조금은 더 원론적인 사용법인것 같습니다. 학문적인 내용말이죠. ^^;;;
크게 어려운 내용은 아니지만 그 이론적인 배경은 좀 심도가 있는 것 같습니다. 하하~ 알고만 있어도 왠지 있어보이는... 겉치레 문화 문제입니다. 뭐라는겨~ ㅡㅡ;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| 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 |
| jQuery API 정복 - 선택요소 확장하기, add() (2) | 2011.03.21 |
| jQuery API 정복 - 폼의 value 가져오기, val() (4) | 2011.03.17 |
| jQuery API 정복 - 클래스 토글하기, toggleClass (5) | 2011.03.15 |
| jQuery API 정복 - 클래스 제거, removeClass() (2) | 2011.03.14 |