자녀 수를 어떻게 세나요?


108

목록이 있습니다

<ul>
  <li>
  <li>
  <li>
  ...
</ul>

내 목록의 항목 수를 계산하려면 jQuery가 필요합니다.


1
jquery 잊어 버려document.querySelectorAll('ul li').length
caub

답변:


188

다음 .length과 같이 사용할 수 있습니다 .

var count = $("ul li").length;

.length선택자가 찾은 일치 항목 수를 알려주므로 <li>하위 <ul>요소 "ul > li"가있는 경우 직접 하위 항목 만 가져 오려면 대신 사용하십시오 . <ul>페이지에 다른 요소가있는 경우 해당 요소 만 일치하도록 선택기를 변경하십시오 (예 : 사용할 ID가있는 경우) "#myListID > li".

하위 유형을 모르는 다른 상황에서는 다음 과 같이 *(와일드 카드) 선택기 또는를 사용할 수 있습니다 .children().

var count = $(".parentSelector > *").length;

또는:

var count = $(".parentSelector").children().length;

1
그 아이가 "리"라는 사실이 알려지지 않았고 무엇이든 될 수 있다면 어떨까요?
Starx 2012-09-24

7
@Starx :$("#parent").children().length
rekamoyka

1
@AlecAnanian, 아니요, 방법을 압니다. 나는 Nick이 그의 대답에도 그것을 추가하기를 바랐습니다.
Starx

2
@Starx -이 : 길 아래에 몇 사람 데 도움이 경우 추가
닉 Craver

요소가 보이지 않으면 어떻게됩니까?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

6

이를 위해 jQuery가 필요하지 않습니다. JavaScript의 .childNodes.length.

기본 텍스트 노드 (기본적으로 비어 있음)를 포함하지 않으려면 1을 빼야합니다. 따라서 다음을 사용합니다.

var count = elem.childNodes.length - 1;

1

사용해보십시오 :

var count = $("ul > li").size();
alert(count);

0

이것을 사용하여 자식을 찾기 위해 현재 선택자를 결정하는 경우 이것이 유지됩니다. <ol>그러면 <li>선택기를 작성하는 방법이 var count = $(this+"> li").length;작동하지 않습니다.


ol에 수업이 있으면 쓸 수 있습니다$("ol.class > li").length
Qwerty

0

jQuery를 사용하여이 작업을 수행 할 수 있습니다.

이 메서드는 자식 목록을 가져온 다음 해당 목록의 길이를 계산합니다.

$("ul").find("*").length;

find () 메소드는 하위 항목을 따라 DOM을 아래쪽으로, 마지막 하위 항목까지 탐색합니다.

참고 : children () 메서드는 DOM 트리 아래로 단일 수준을 탐색합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.