jQuery를 사용하여 즉시 하위 div 요소 카운트

jQuery를 사용하여 즉시 하위 div 요소 카운트

HTML 노드 구조는 다음과 같습니다.

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
  </div>
  <span></span>
</div>

의 직계 하위 항목 수를 어떻게 계산합니까?foo유형의div위의 예에서 결과는 두 개여야 합니다(bar그리고.baz).

$("#foo > div").length

ID가 'foo'인 요소의 직접 자식(div)입니다.그런 다음 생성된 래핑된 세트의 크기를 검색합니다.

를 사용하는 것이 좋습니다.$('#foo').children().size()더 나은 성능을 위해.

속도 차이를 확인하기 위해 jsperf 테스트를 만들었습니다.children()방법은 Chrome(카나리아 빌드 v15)에서 하위 선택기(#foo > div) 접근 방식을 최소 60% 차이로 이겼습니다(v4)

그런데, 말할 필요도 없이, 이 두 가지 접근 방식은 동일한 결과를 산출합니다(이 경우, 1000).

[업데이트] size() vs length test를 포함하도록 test를 업데이트했는데 큰 차이가 없습니다(결과:length사용 속도가 보다 약간 빠름(2%)size())

[업데이트] OP에 표시된 잘못된 마크업으로 인해(나에 의해 '마크업 검증' 업데이트 전), 둘 다$("#foo > div").length&$('#foo').children().length결과는 동일합니다(jfiddle).하지만 정답이 'div' 아이들만 얻으려면 아이 선택기를 사용하여 정확하고 더 나은 성능을 발휘해야 합니다.

$("#foo > div") 

#foo의 직계 후손인 모든 div를 선택합니다.
자식 집합이 있으면 크기 함수를 사용할 수 있습니다.

$("#foo > div").size()

또는 사용할 수 있습니다.

$("#foo > div").length

둘 다 동일한 결과를 반환합니다.

$('#foo').children('div').length

MrCoders가 jsperf를 사용하여 답변하는 것에 대해 돔 노드를 사용하는 것이 어떻습니까?

var $foo = $('#foo');
var count = $foo[0].childElementCount

http://jsperf.com/jquery-child-ele-size/7 에서 테스트를 시도할 수 있습니다.

이 메소드는 46,095 op/s를 얻는 반면 다른 메소드는 최대 2000 op/s입니다.

$('#foo > div').size()

$("#foo > div").length

jQuery에는 요소가 나타나는 횟수를 반환하는 .size() 함수가 있지만 jQuery 설명서에 지정된 대로 요소가 더 느리고 .length 속성과 동일한 값을 반환하므로 단순히 .length 속성을 사용하는 것이 가장 좋습니다.출처: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

var divss = 0;
$(function(){
   $("#foo div").each(function(){
    divss++;

   });
   console.log(divss);  
});     
<div id="foo">
  <div id="bar" class="1"></div>
  <div id="baz" class="1"></div>
  <div id="bam" class="1"></div>
</div>

최신 버전의 jquery를 사용하면$("#superpics div").children().length.

var n_numTabs = $("#superpics div").size();

또는

var n_numTabs = $("#superpics div").length;

---

이미 말했듯이, 둘 다 같은 결과를 반환합니다.
그러나 size() 함수는 더 jQuery "P.C."입니다.
제 페이지에도 비슷한 문제가 있었습니다.
지금은 >만 생략하면 잘 작동할 수 있을 겁니다.

$("div", "#superpics").size();

div 유형의 즉시 하위 요소에 대해 시도합니다.

$("#foo > div")[0].children.length

언급URL : https://stackoverflow.com/questions/250688/count-immediate-child-div-elements-using-jquery