jQuery 공작소 : .slice()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
slice 메서드는 셀렉터에 해당하는 요소의 순서를 이용하여 일부만 골라냅니다.
예제를 보시면 쉽게 이해할 수 있습니다. ^^
예제 1
기본 예제 - slice( 수치 )
보기
버튼을 눌러보세요.
0
1
2
3
4
5
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="//superkts.com/img/huk1.gif"><br>0</span>
<span><img src="//superkts.com/img/huk1.gif"><br>1</span>
<span><img src="//superkts.com/img/huk1.gif"><br>2</span>
<span><img src="//superkts.com/img/huk1.gif"><br>3</span>
<span><img src="//superkts.com/img/huk1.gif"><br>4</span>
<span><img src="//superkts.com/img/huk1.gif"><br>5</span>
</div>
<script type="text/javascript">
function j_test(j){
j.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
j.attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
.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="//superkts.com/img/huk1.gif"><br>0</span>
<span><img src="//superkts.com/img/huk1.gif"><br>1</span>
<span><img src="//superkts.com/img/huk1.gif"><br>2</span>
<span><img src="//superkts.com/img/huk1.gif"><br>3</span>
<span><img src="//superkts.com/img/huk1.gif"><br>4</span>
<span><img src="//superkts.com/img/huk1.gif"><br>5</span>
</div>
<script type="text/javascript">
function j_test(j){
j.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
j.attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
관련 CSS
jQuery
slice( 수치 ) - 지정한 수치의 인덱스 부터 대상으로 합니다.
slice( 0 ) - 인덱스 0 부터(처음) 이후로 전부
slice( 1 ) - 인덱스 1 부터 이후로 전부
- 인덱스는 0 부터 시작입니다.
예제 2
기본 예제 - slice( 수치, 수치 )
보기
버튼을 눌러보세요.
0
1
2
3
4
5
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="//superkts.com/img/huk1.gif"><br>0</span>
<span><img src="//superkts.com/img/huk1.gif"><br>1</span>
<span><img src="//superkts.com/img/huk1.gif"><br>2</span>
<span><img src="//superkts.com/img/huk1.gif"><br>3</span>
<span><img src="//superkts.com/img/huk1.gif"><br>4</span>
<span><img src="//superkts.com/img/huk1.gif"><br>5</span>
</div>
<script type="text/javascript">
function j_test(j){
j.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
j.attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
.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="//superkts.com/img/huk1.gif"><br>0</span>
<span><img src="//superkts.com/img/huk1.gif"><br>1</span>
<span><img src="//superkts.com/img/huk1.gif"><br>2</span>
<span><img src="//superkts.com/img/huk1.gif"><br>3</span>
<span><img src="//superkts.com/img/huk1.gif"><br>4</span>
<span><img src="//superkts.com/img/huk1.gif"><br>5</span>
</div>
<script type="text/javascript">
function j_test(j){
j.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
j.attr('src', '//superkts.com/img/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
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="//superkts.com/img/huk1.gif"><br>0<br>-6</span>
<span><img src="//superkts.com/img/huk1.gif"><br>1<br>-5</span>
<span><img src="//superkts.com/img/huk1.gif"><br>2<br>-4</span>
<span><img src="//superkts.com/img/huk1.gif"><br>3<br>-3</span>
<span><img src="//superkts.com/img/huk1.gif"><br>4<br>-2</span>
<span><img src="//superkts.com/img/huk1.gif"><br>5<br>-1</span>
</div>
<script type="text/javascript">
function j_test(j){
j.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
j.attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
.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="//superkts.com/img/huk1.gif"><br>0<br>-6</span>
<span><img src="//superkts.com/img/huk1.gif"><br>1<br>-5</span>
<span><img src="//superkts.com/img/huk1.gif"><br>2<br>-4</span>
<span><img src="//superkts.com/img/huk1.gif"><br>3<br>-3</span>
<span><img src="//superkts.com/img/huk1.gif"><br>4<br>-2</span>
<span><img src="//superkts.com/img/huk1.gif"><br>5<br>-1</span>
</div>
<script type="text/javascript">
function j_test(j){
j.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
j.attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
관련 CSS
jQuery
- 마이너스 수치는 인덱스를 뒤에서 부터 사용합니다.
jQuery 홈페이지 .slice() API 문서 : http://api.jquery.com/slice/