jQuery를 사용하여 직계 아동 div 요소를 계산하십시오

Question

다음 HTML 노드 구조가 있습니다.

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

직계 자녀의 수를 어떻게 계산합니까? foo, 그것은 유형입니다 div? 위의 예에서 결과는 두 가지 여야합니다 (bar 그리고 baz).

Answer 1

$("#foo > div").length

Divs 인 ID 'foo'로 요소의 어린이를 직접. 그런 다음 생성 된 랩핑 된 세트의 크기를 검색합니다.

Answer 2

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

나는 a jsperf 속도 차이와 children() 메소드는 자식 선택기 (#foo> div) 접근 방식을 적어도 60% 크롬에서 (Canary Build V15) 20-30% Firefox (v4)에서.

그건 그렇고,이 두 가지 접근법은 동일한 결과를 얻습니다 (이 경우 1000).

업데이트] 크기 () 대 길이 테스트를 포함하도록 테스트를 업데이트했는데 큰 차이가 없습니다 (결과 : length 사용량은보다 약간 빠릅니다 (2%) size())

업데이트] OP에서 볼 수있는 잘못된 마크 업으로 인해 ( 'Markup Validated'업데이트 전), 둘 다 $("#foo > div").length & $('#foo').children().length 같은 결과 (jsfiddle). 그러나 'Div'어린이 만 얻는 정답의 경우 올바른 성능과 더 나은 성능을 위해 어린이 선택기를 사용해야합니다.

Answer 3

$("#foo > div") 

#FOO의 즉각적인 자손 인 모든 div를 선택합니다
어린이 세트가 있으면 크기 기능을 사용할 수 있습니다.

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

또는 사용할 수 있습니다

$("#foo > div").length

둘 다 당신에게 같은 결과를 반환합니다

Answer 4

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

Answer 5

JSPerf를 사용한 MrCoders 답변에 대한 응답으로 DOM 노드를 사용하지 않는 이유는 무엇입니까?

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

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

이 방법은 46,095 OP/S를 얻는 반면 다른 방법은 2000 OP/S입니다.

Answer 6

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

Answer 7

$("#foo > div").length

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

Answer 8

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>

Answer 9

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

또는

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

---

이미 말했듯이, 둘 다 같은 결과를 반환합니다.
그러나 크기 () 함수는 더 jQuery "PC"입니다.
내 페이지와 비슷한 문제가있었습니다.
지금은>를 생략하면 잘 작동합니다.

Answer 10

가장 최근 버전의 jQuery를 사용하면 사용할 수 있습니다. $("#superpics div").children().length.

Answer 11

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