[javascript] jQuery를 사용하여 즉각적인 하위 div 요소 수

Program / 글쓴이

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

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

foo유형에 해당하는 직계 자녀 수는 어떻게 계산 div합니까? 위의 예에서 결과는 2 ( bar및 baz) 여야합니다 .

답변

$("#foo > div").length

ID가 ‘foo’인 요소의 하위 요소는 div입니다. 그런 다음 랩핑 된 세트의 크기를 검색합니다.

답변

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

속도 차이와 속도를 확인하기 위해 jsperf 테스트를 만들었습니다 .children() 메소드가 하위 선택기 (#foo> div) 접근 방식을 60 % 이상 (카나리아 빌드 v15) 20-30 % 에서 Firefox (v4)에서 .

그건 그렇고,이 두 가지 접근 방식은 동일한 결과 (이 경우 1000)를 생성합니다.

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

[업데이트] OP에서 볼 수있는 잘못된 마크 업 ( ‘markup validated’업데이트 전)으로 인해 $("#foo > div").length& 모두 $('#foo').children().length동일한 결과 ( jsfiddle )입니다. 그러나 ‘div’자녀 만 얻는 정답을 얻으려면 하나의 자녀 선택기를 사용하여 정확하고 나은 성능을 발휘해야합니다.

답변

$("#foo > div")

하위
세트가 있으면 #foo 함수의 직계 자손 인 모든 div를 선택합니다 . size 함수를 사용할 수 있습니다.

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

또는 당신은 사용할 수 있습니다 

$("#foo > div").length

둘 다 같은 결과를 반환합니다

답변

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

답변

mrCoders에 대한 응답으로 jsperf를 사용하여 왜 dom 노드를 사용하지 않습니까?

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 속성과 동일한 값을 반환하므로 간단히 사용하는 것이 가장 좋습니다. 길이 속성. 여기에서 : http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/