Javascript & JQuery & CSS

.slice() 함수는 요소 집합의 특정 부분을 잘라내어 축소시킨 집합을 만들어 줍니다.

start 인덱스는 잘라낼 시작위치를 의미합니다. 만약 end 인자가 생략되었다면, 해당 집합을 잘라낼 끝 값은 마지막 인덱스 번호가 됩니다.


  .slice( start, [end] )
start : 0 값을 초기값으로 하는 집합을 잘라낼 인덱스의 시작 번호. 만약 음수값이 오면 집합의 인덱스 끝을 의미함.
end :0 값을 초기값으로 하는 인덱스의 집합을 잘라낼 인덱스 종료 번호.
음수값이 오면 집합 인덱스 끝에서 부터 앞쪽으로 진행함. 생략되면 집합의 마지막 인덱스 까지를 의미함.

간단한 예제를 보면서 설명드리도록 하겠습니다.
 

		<ul>
		  <li>list item 1</li>		-- index : 0
		  <li>list item 2</li>		-- index : 1
		  <li>list item 3</li>		-- index : 2
		  <li>list item 4</li>		-- index : 3
		  <li>list item 5</li>		-- index : 4
		</ul>

위와 같은 HTML 이 있을 경우  아래처럼 스크립트를 입혀보면
 

	$('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 만 변하게 됩니다.
여기에서 독특한데요. 뒤에 4 인자는 네번째 인자를 말하게 됩니다. (index:3 이 되겠네요)

음수형 인덱스 사용

jQuery의 .slice() 함수는 JavaScript 배열을 다루는 함수인 .slice() 와 비슷합니다.
음수값을 인자로 했을 때의 기능도 거의 비슷하게 꾸며졌습니다.

음수값이 인자로 주어졌다면 인덱스의 시작점이 앞쪽이 아닌 집합 요소의 끝 인덱스 부터 작은 쪽으로 이동하게 되는 것입니다. 예를 들어 볼까요
 

$('li').slice(-2, -1).css('background-color', 'red');

 위의 스크립트는 음수값이 인자로 주어졌습니다.
이 스크립트의 결과는 item 4 만 빨간 배경으로 바뀌게 됩니다. 끝에서 2개 앞을 의미하는 (-2) 와 끝에서 1개 앞을 의미하는 (-1) 사이에 위치해 있기 때문입니다.