[jQuery] 특정 요소의 n번 째 자식 요소 구하기

특정 요소의 n번 째 자식 요소 구하기

jQuery로 어떤 요소의 자식요소를 가져올 수 있는 여러 가지 방법을 아래와 같이 알아보았습니다.

first(), last() 함수 이용하기

아래와 같은 방법으로 첫 번째 자식 요소와 마지막 자식 요소를 가져올 수 있습니다. 

반환되는 요소는 jQuery 객체입니다.

$('.parent').children().first();
$('.parent').children().last();

eq() 함수 이용하기

children() 함수와 eq() 함수를 통해 n번 째 자식 요소를 구할 수 있습니다.

매개변수로 0으로 시작하는 양수 인덱스를 넘길 수 있으며, -1로 시작하는 음수를 매개변수로 넘기면 요소를 뒤에서부터 찾아옵니다.

반환되는 요소는 jQuery 객체입니다.

$('.parent').children().eq(0); //앞에서 첫 번 째 요소
$('.parent').children().eq(1);
$('.parent').children().eq(2);

$('.parent').children().eq(-1); //뒤에서 첫 번 째 요소
$('.parent').children().eq(-2);
$('.parent').children().eq(-3);

CSS 선택자 이용하기

children() 함수에 CSS 선택자를 매개변수로 주어 직접 n번 째 자식 요소를 구할 수도 있습니다.

반환되는 요소는 jQuery 객체입니다.

$('.parent').children(':first-child'); // 첫번 째 요소
$('.parent').children(':last-child');  // 마지막 요소

$('.parent').children(':nth-child(0)'); //첫 번 째 요소
$('.parent').children(':nth-child(1)');
$('.parent').children(':nth-child(2)');

순수 DOM 노드에 접근하기

jQuery 객체 대신 순수 DOM 접근이 필요할 때는 다음처럼 쓰면 됩니다.

단, 음수 매개변수 방식은 사용이 불가능합니다.

$('.parent').get(0).firstElementChild;
$('.parent').get(0).lastElementChild;

$('.parent').get(0).children[0];
$('.parent').get(0).children[1];
$('.parent').get(0).children[2];

// 아래와 같은 음수 매개변수 방식은 사용 불가능❌
$('.parent').get(0).children[-1];
$('.parent').get(0).children[-2];
$('.parent').get(0).children[-3];

 

 

마치며

jQuery를 이용해 자식요소에 접근하고 가져오는 방법을 알아보았습니다.

<ul>, <li>와 같은 리스트 요소나 swiper 라이브러리 같은 캐러셀 요소에 접근할 때 유용하게 사용할 수 있을 것 같습니다.

 

감사합니다!