jQuery 선택자 함수 slice() - 시작부터 끝까지 인덱스 일부만 선택하기

웹 개발에서 특정 요소를 선택하고 조작하는 것은 매우 중요합니다. 이때, jQuery의 slice() 메서드는 선택자에서 일부 요소만 선택하는 데에 유용한 기능을 제공합니다. 이 글에서는 slice() 메서드의 사용법과 다양한 활용 사례를 살펴보겠습니다.

slice() 메서드의 기본 사용법은 다음과 같습니다:

$('선택자').slice(시작, 끝).addClass('새로운클래스');

위 코드를 실행하면, 선택한 요소 중에서 시작부터 끝까지의 요소가 선택되며, 선택된 요소에 '새로운클래스'라는 클래스가 추가됩니다.

아래는 slice() 메서드를 사용한 예제입니다:

// 2번부터 5번까지의 요소를 선택하고 'newClass' 클래스를 추가합니다.
$('선택자').slice(2, 5).addClass('newClass');

이렇게 실행하면, 선택된 요소 중에서 2번, 3번, 4번, 5번 요소가 선택되어 'newClass' 클래스가 부여됩니다.

slice() 메서드는 다양한 선택자와 함께 사용하여 다양한 상황에 적용할 수 있습니다. 몇 가지 예시를 살펴보겠습니다:

// 'parents' ID 아래의 직계 자식 중에서 모든 태그를 선택하고 범위 내의 요소만 조작합니다.
$('#parents > *').slice(2, 5).addClass('newClass');

// 'parents' ID 아래의 직계 자식 중에서 'a'와 'h1'을 제외하고 일부 요소를 선택합니다.
$('#parents > *:not(a):not(h1)').slice(1, 3).addClass('highlight');

slice() 메서드는 jQuery에서 특정 범위의 요소를 선택하고 원하는 동작을 적용하는 데 유용한 도구입니다. 선택자를 조합하여 활용함으로써 원하는 요소를 쉽게 조작할 수 있습니다.

html5css2018