.slice()
원문 링크 
http://api.jquery.com/slice/
개요 : 요소 집합을 인자로 주어진 범위로 축소시킵니다. 인덱스 번호 기준으로 잘라내는 겁니다.
- .slice( start, [end] )
- start 0 값을 초기값으로 하는 집합을 잘라낼 인덱스의 시작 번호. 만약 음수값이 오면 집합의 인덱스 끝을 의미함.
- end 0 값을 초기값으로 하는 인덱스의 집합을 잘라낼 인덱스 종료 번호. 음수값이 오면 집합 인덱스 끝에서 부터 앞쪽으로 진행함. 생략되면 집합의 마지막 인덱스 까지를 의미함.
.slice() 함수는 요소 집합의 특정 부분을 잘라내어 축소시킨 집합을 만들어 줍니다. start 인덱스는 잘라낼 시작위치를 의미합니다. 만약 end 인자가 생략되었다면, 해당 집합을 잘라낼 끝 값은 마지막 인덱스 번호가 됩니다.
쉽죠?? ㅎㅎ; 말로 하니 어려운 것 같습니다. 그냥 start 부터 end 번째 인덱스 까지 자르는 함수입니다. 라고 쉽게 설명드려도 될텐데 말이죠.
알기 쉽기 위해서 예제로 고고고~~
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
아래처럼 스크립트를 입혀보면
$('li').slice(2).css('background-color', 'red'); 결과는 items 3, 4, 5 의 배경색이 빨간색으로 바뀌게 되는 것입니다. 여기서 말하는 zero-based의 기준은 DOM 트리의 인덱스 번호가 아닌 jQuery 객체의 인덱스 기준입니다.
위의 마크업에 아래와 같이 end 값의 인자를 넣어 보겠습니다.
$('li').slice(2, 4).css('background-color', 'red'); 이번에는 items 3, 4 만 변하게 됩니다. 쉽죠?? ㅎㅎ
음수형 인덱스 사용
jQuery의 .slice() 함수는 JavaScript 배열을 다루는 함수인 .slice() 와 비슷합니다. 음수값을 인자로 했을 때의 기능도 거의 비슷하게 꾸며졌습니다. 음수값이 인자로 주어졌다면 인덱스의 시작점이 앞쪽이 아닌 집합 요소의 끝 인덱스 부터 작은 쪽으로 이동하게 되는 것입니다. 예를 들어 볼까요:
$('li').slice(-2, -1).css('background-color', 'red'); 위의 스크립트는 음수값이 인자로 주어졌습니다. 이 스크립트의 결과는 item 4 만 빨간 배경으로 바뀌게 됩니다. 끝에서 2개 앞을 의미하는 (-2) 와 끝에서 1개 앞을 의미하는 (-1) 사이에 위치해 있기 때문입니다.
예 제
slice의 인자를 무작위로 발생시켜 div를 선택하여 내부색을 변경합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:40px; height:40px; margin:10px; float:left;
border:2px solid blue; }
span { color:red; font-weight:bold; }
button { margin:5px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button>Turn slice yellow</button>
<span>Click the button!</span></p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
function colorEm() {
var $div = $("div");
var start = Math.floor(Math.random() *
$div.length);
var end = Math.floor(Math.random() *
($div.length - start)) +
start + 1;
if (end == $div.length) end = undefined;
$div.css("background", "");
if (end)
$div.slice(start, end).css("background", "yellow");
else
$div.slice(start).css("background", "yellow");
$("span").text('$("div").slice(' + start +
(end ? ', ' + end : '') +
').css("background", "yellow");');
}
$("button").click(colorEm);
</script>
</body>
</html>
미리보기
버튼 클릭하시면서 인덱스랑 비교해 보세요. 재미있습니다. 랜덤 발생시키는 루틴도 잘 보시면 아주 큰 도움이 되실겁니다.
slice라는 함수는 기본 자바스크립트 배열에서도 사용됩니다. 혹시나 같이 사용하게 되면 주의해서 잘 사용하셔야 겠네요. 야호~ 개인적으로는 탐색 챕터가 끝이났네요. ㅎㅎ
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 앞에 추가하기, before() (1) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 새로운 요소 추가, appendTo() (4) | 2011.07.26 |
| jQuery API 정복 - 마지막 자식 요소 추가, append() (6) | 2011.07.20 |
| jQuery API 정복 - 뒤에 추가하기, after() (1) | 2011.07.14 |
| jQuery API 정복 - 형제 요소들 찾기, siblings (0) | 2011.07.06 |
| jQuery API 정복 - 이전에 있는 것들, prevAll() (0) | 2011.07.05 |
| jQuery API 정복 - 이전 요소 찾기, prev() (0) | 2011.07.05 |
| jQuery API 정복 - 특정 조건을 만날 때까지 이전 요소들을 쭈욱, prevUntil() (0) | 2011.06.30 |