.slice()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

slice 메서드는 셀렉터에 해당하는 요소의 순서를 이용하여 일부만 골라냅니다.
예제를 보시면 쉽게 이해할 수 있습니다. ^^

예제 1
기본 예제 - slice( 수치 )
보기
버튼을 눌러보세요.


0

1

2

3

4

5
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
    .css_test img {
        width : 60px;
        margin-bottom : 7px;
    }
    .css_test span {
        display : inline-block;
        padding : 5px;
    }
</style>

버튼을 눌러보세요.<br><br>

<button type="button" onclick="j_test( $('.css_test img').slice(0) )">;slice( 0 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(1) )">;slice( 1 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(2) )">;slice( 2 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(4) )">;slice( 4 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(6) )">;slice( 6 )</button>

<div class="css_test">
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>0</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>1</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>2</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>3</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>4</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>5</span>
</div>

<script type="text/javascript">

    function j_test(j){
        j.attr('src', 'http://biketago.com/img/etc/huk2.gif'); // 표정바꾸기

        setTimeout(function(){
            j.attr('src', 'http://biketago.com/img/etc/huk1.gif'); // 표정되돌리기
        }, 500);
    }

</script>
관련 CSS
jQuery

slice( 수치 )  -  지정한 수치의 인덱스 부터 대상으로 합니다.
slice( 0 )  -  인덱스 0 부터(처음) 이후로 전부
slice( 1 )  -  인덱스 1 부터 이후로 전부

- 인덱스는 0 부터 시작입니다.

예제 2
기본 예제 - slice( 수치, 수치 )
보기
버튼을 눌러보세요.




0

1

2

3

4

5
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
    .css_test img {
        width : 60px;
        margin-bottom : 7px;
    }
    .css_test span {
        display : inline-block;
        padding : 5px;
    }
</style>

버튼을 눌러보세요.<br><br>

<button type="button" onclick="j_test( $('.css_test img').slice(0, 0) )">;slice( 0, 0 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(0, 1) )">;slice( 0, 1 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(0, 2) )">;slice( 0, 2 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(0, 3) )">;slice( 0, 3 )</button><br>
<button type="button" onclick="j_test( $('.css_test img').slice(1, 1) )">;slice( 1, 1 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(1, 2) )">;slice( 1, 2 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(1, 4) )">;slice( 1, 4 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(1, 5) )">;slice( 1, 5 )</button><br>
<button type="button" onclick="j_test( $('.css_test img').slice(2, 4) )">;slice( 2, 4 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(4, 5) )">;slice( 4, 5 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(1, 5) )">;slice( 1, 5 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(3, 6) )">;slice( 3, 6 )</button>

<div class="css_test">
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>0</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>1</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>2</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>3</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>4</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>5</span>
</div>

<script type="text/javascript">

    function j_test(j){
        j.attr('src', 'http://biketago.com/img/etc/huk2.gif'); // 표정바꾸기

        setTimeout(function(){
            j.attr('src', 'http://biketago.com/img/etc/huk1.gif'); // 표정되돌리기
        }, 500);
    }

</script>
관련 CSS
jQuery

slice( 시작, 종료 )  -  지정한 인덱스의 시작 부터 종료 수치까지 대상으로 합니다.
slice( 0, 1 )  -  인덱스 0 부터 1 까지, 이때 시작 수치는 포함되며 종료수치는 포함되지 않습니다.

- 시작 인덱스 수치를 포함해서 종료 수치 전까지 적용됩니다.

예제 3
마이너스 수치 사용하기
보기
버튼을 눌러보세요.




0
-6

1
-5

2
-4

3
-3

4
-2

5
-1
소스
<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
    }
    .css_test img {
        width : 60px;
        margin-bottom : 7px;
    }
    .css_test span {
        display : inline-block;
        padding : 5px;
    }
</style>

버튼을 눌러보세요.<br><br>

<button type="button" onclick="j_test( $('.css_test img').slice(-1) )">;slice( -1 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(-2) )">;slice( -2 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(-5) )">;slice( -5 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(-6) )">;slice( -6 )</button><br>
<button type="button" onclick="j_test( $('.css_test img').slice(-2, -1) )">;slice( -2, -1 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(0, -1) )">;slice( 0, -1 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(-1, 0) )">;slice( -1, 0 )</button><br>
<button type="button" onclick="j_test( $('.css_test img').slice(-6, 3) )">;slice( -6, 3 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(-6, -1) )">;slice( -6, -1 )</button>
<button type="button" onclick="j_test( $('.css_test img').slice(-1, -6) )">;slice( -1, -6 )</button>

<div class="css_test">
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>0<br>-6</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>1<br>-5</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>2<br>-4</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>3<br>-3</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>4<br>-2</span>
    <span><img src="http://biketago.com/img/etc/huk1.gif"><br>5<br>-1</span>
</div>

<script type="text/javascript">

    function j_test(j){
        j.attr('src', 'http://biketago.com/img/etc/huk2.gif'); // 표정바꾸기

        setTimeout(function(){
            j.attr('src', 'http://biketago.com/img/etc/huk1.gif'); // 표정되돌리기
        }, 500);
    }

</script>
관련 CSS
jQuery
- 마이너스 수치는 인덱스를 뒤에서 부터 사용합니다.
jQuery 홈페이지 .slice() API 문서 : http://api.jquery.com/slice/