jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

jQuery의 .length는 jQuery 객체에 들어 있는 요소의 개수를 나타내는 숫자 속성입니다. $("#tasks > li").length처럼 괄호 없이 읽으며, 일치하는 요소가 없으면 0입니다. 현재 문서의 개수를 알고 싶다면 요소를 추가하거나 삭제한 뒤 선택을 다시 실행해야 합니다.

개수와 존재 여부 확인하기

.length 공식 문서의 대상은 선택된 요소 집합입니다. 요소 안의 글자 수나 자식 개수가 아니며, 선택자 조건에 맞으면 숨겨진 요소도 포함합니다. 조건을 좁히면 그 조건에 맞는 요소 수만 얻을 수 있습니다.

if ($("#missing-item"))는 존재 여부 검사로 사용할 수 없습니다. 요소가 없어도 jQuery 객체는 만들어지고 객체 자체는 참으로 평가됩니다. .length를 읽어 0인지 확인해야 합니다. 또한 .length는 함수가 아니므로 .length()로 호출하면 TypeError가 발생합니다.

추가·삭제와 현재 개수를 비교하는 전체 예제

전체 코드를 UTF-8의 length-demo.html로 저장하고 브라우저에서 엽니다. 별도 설치는 필요하지 않으며, 공식 jQuery 파일을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 읽을 인터넷 연결이 필요합니다. 코드는 4.0.0을 사용하고, 개수·존재 확인과 추가·삭제·초기화를 3.7.1과 4.0.0에서 실행해 확인했습니다.

초기 목록은 Alpha와 Beta 두 요소입니다. Beta는 CSS로 숨겼지만 문서에는 남아 있고 done 클래스도 있습니다. current는 매번 새로 선택한 수, completed는 그중 done인 수, saved는 시작할 때 저장한 집합의 수입니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Count selected list elements</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    li { padding: 8px; border-bottom: 1px solid #ddd; }
    .is-hidden { display: none; }
    button { padding: 8px; margin: 4px; }
    #result { white-space: pre-line; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Count selected list elements</h1>
  <p>One initial item is hidden but remains in the document.</p>
  <ul id="tasks">
    <li id="alpha">Alpha</li>
    <li id="beta" class="done is-hidden">Beta</li>
  </ul>
  <button type="button" id="add">Add item</button>
  <button type="button" id="remove">Remove last</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const initialHtml = $("#tasks").html();
      const $saved = $("#tasks > li");
      let next = 3;
      function refresh() {
        const $current = $("#tasks > li");
        $("#result").text(
          `current=${$current.length}
` +
          `completed=${$current.filter(".done").length}
` +
          `saved=${$saved.length}
` +
          `present=${$current.length > 0 ? "yes" : "no"}`
        );
      }
      $("#add").on("click", function () {
        $("<li>").text("New " + next++).appendTo("#tasks");
        refresh();
      });
      $("#remove").on("click", function () {
        $("#tasks > li").last().remove();
        refresh();
      });
      $("#reset").on("click", function () {
        $("#tasks").html(initialHtml);
        next = 3;
        refresh();
      });
      refresh();
    });
  </script>
</body>
</html>

화면에는 Alpha만 보이지만 .length는 두 li를 세므로 초기 출력은 다음과 같습니다.

current=2
completed=1
saved=2
present=yes

1. Add item을 누르면 New 3이 추가되어 current가 3이 됩니다. completed는 1, saved는 2로 유지됩니다.
2. Remove last를 한 번 누르면 새 행이 없어져 current가 2로 돌아갑니다. 다시 누르면 숨긴 Beta가 제거되어 current는 1, completed는 0입니다.
3. 다시 누르면 Alpha도 없어져 current는 0, present는 no가 됩니다. 빈 목록에서 더 눌러도 제거할 요소가 없으므로 계속 0입니다.
4. Reset은 저장한 초기 HTML을 복원하고 추가 항목 번호를 3으로 되돌린 뒤 다시 계산합니다. 처음의 두 요소와 숨김·done 상태가 복구됩니다.

이 예제는 고정된 초기 HTML을 복원합니다. 사용자가 내용을 편집하는 실제 화면에서 같은 방식으로 전체 HTML을 덮어쓰면 그 편집도 사라지므로, 실제 초기화 범위는 보존할 데이터와 구분해서 정해야 합니다.

요소 개수와 텍스트 길이 구분하기

Reset을 누른 뒤 개발자 도구의 Console에 아래 부분 코드를 실행합니다. #missing-item은 예제에 존재하지 않는 ID입니다.

if ($("#missing-item").length === 0) {
  console.log("not found");
}
console.log($("#tasks > li").length);
console.log($("#tasks > li").first().text().length);

not found
2
5

2는 선택한 li의 개수이고 5는 첫 요소의 Alpha 문자열 길이입니다. .text()는 문자열을 반환하므로 그 뒤의 .length는 문자열의 속성입니다. 같은 이름이어도 점 앞의 대상이 jQuery 객체인지 문자열인지에 따라 의미가 달라집니다.

자동 갱신·실행 시점·이전 코드 점검하기

saved가 계속 2인 이유는 처음 만든 jQuery 집합을 유지하기 때문입니다. 문서에서 원래 요소를 삭제해도 그 집합의 길이가 자동으로 바뀌지 않습니다. Reset은 새 요소를 만들지만 saved를 새 집합으로 바꾸지 않으므로, 현재 문서의 존재 여부나 개수는 refresh처럼 다시 조회한 결과로 판단합니다.

선택을 너무 일찍 실행하면 아직 요소가 생성되지 않아 0일 수 있습니다. 예제의 DOM 준비 콜백인 $(function () { ... })는 DOM(Document Object Model, 문서 객체 모델)을 다룰 준비가 된 뒤 실행합니다. 비동기로 받아서 넣는 요소는 이 초기 시점보다 늦게 생길 수도 있으므로 삽입이 끝난 시점에 개수를 계산합니다.

오래된 코드의 .size()는 jQuery 3.0에서 제거되었습니다. 현재 코드는 .length로 바꾸며 .size()를 새 예제에 사용하지 않습니다. 값이 이상하면 Network의 jQuery 로딩, Console 오류와 버전, 선택자의 범위·클래스·ID, 요소 추가 완료 시점부터 확인합니다.