JavaScript나 jQuery에서 노드 목록의 마지막 항목을 가져올 때 length 속성을 사용하지 않고도 간단하게 처리할 수 있습니다. 바로 jQuery의 :last 선택자를 활용하는 방법입니다.
예제 테이블 준비
먼저 다음과 같은 테이블이 있다고 가정해 보겠습니다.
<table id="demo" border="1"> <tr> <td>John</td> </tr> <tr> <td>David</td> </tr> <tr> <td>Mike</td> </tr> </table>
이 테이블에는 John, David, Mike 세 개의 행이 있으며, 우리의 목표는 마지막 행인 "Mike" 값을 가져오는 것입니다.
:last 선택자로 마지막 항목 가져오기
length 속성을 계산할 필요 없이, 아래와 같이 :last 선택자를 text() 메서드와 함께 사용하면 마지막 항목을 바로 얻을 수 있습니다.
$('table tr:last td')이 선택자는 테이블 내 마지막 <tr> 요소의 <td> 셀을 가리키며, 여기에 .text()를 호출하면 해당 셀의 텍스트 값이 반환됩니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table id="demo" border="1">
<tr>
<td>John</td>
</tr>
<tr>
<td>David</td>
</tr>
<tr>
<td>Mike</td>
</tr>
</table>
<script>
var lastValue = $('table tr:last td').text();
console.log("마지막 값은 = " + lastValue);
</script>
</body>
</html>프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그런 다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 브라우저 콘솔에 다음과 같은 출력이 표시됩니다.
마지막 값은 = Mike
이처럼 :last 선택자를 사용하면 요소의 개수를 세지 않고도 노드 목록의 마지막 항목을 손쉽게 가져올 수 있습니다. 코드가 간결해질 뿐만 아니라 가독성도 크게 향상되므로, 동적으로 행이 추가되거나 삭제되는 테이블을 다룰 때 특히 유용합니다.