[Traversing] JQ - slice() 메서드 - 특정 색인번호 범위 내로 요소 선택 범위 축소. (= slice메서드 = 슬라이스메서드)

목차

1. slice() 예제 - 양수 (start <= index)
2. slice() 정의 
3. slice() 구문 
4. slice() 예제 - 양수 (start <= index < stop)
5. slice() 예제 - 음수 (start <= index)
6. slice() 예제 - 음수 (start <= index < stop)

slice() 예제 - 양수 (start <= index)

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").slice(2).css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>index 0</p>

<p>index 1</p>

<p>index 2</p>

<p>index 3</p>

 

결과보기

slice() 정의 

 

선택자가 가리키는 요소 중, 특정 색인번호 범위 내 요소만 선택. 

 

---

 

1.

색인번호 범위: start <= index < stop

 

2.

stop 없는 경우, 마지막 요소까지 자동 선택. 

 

slice() 구문 

 

$(selector).slice(start,stop)

 

---

[매개변수]

 

start

필수. 시작 색인번호. (포함 O). (색인은 0부터 시작)

앞부터 색인 : 0부터 시작.

뒤부터 색인 : -1부터시작

 

stop

선택. 종료 색인번호. (포함 X) 

 

---

[반환값]

 

start <= index < stop 범위의 요소 선택. 

stop 없는 경우, 마지막 요소까지 자동 선택.

 

slice() 예제 - 양수 (start <= index < stop)

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("p").slice(2,4).css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>index 0</p>

<p>index 1</p>

<p>index 2</p>

<p>index 3</p>

<p>index 4</p>

<p>index 5</p>

 

결과보기

slice() 예제 - 음수 (start <= index)

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").slice(-3).css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>index 0</p>

<p>index 1</p>

<p>index 2</p>

<p>index 3</p>

<p>index 4</p>

<p>index 5</p>

 

결과보기

slice() 예제 - 음수 (start <= index < stop)

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p").slice(-3,-1).css("background-color", "yellow");

});

</script>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>index 0</p>

<p>index 1</p>

<p>index 2</p>

<p>index 3</p>

<p>index 4</p>

<p>index 5</p>

 

결과보기