Policz bezpośrednie podrzędne elementy div za pomocą jQuery

Mam następującą strukturę węzłów HTML:

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

Jak policzyć liczbę najbliższych dzieci foo, które są typu div? W powyższym przykładzie wynik powinien wynosić dwa ( bari baz).

$("#foo > div").length

Bezpośrednie dzieci elementu o identyfikatorze „foo”, które są elementami div. Następnie pobieram rozmiar zapakowanego zestawu.

Zalecam używanie $('#foo').children().size()dla lepszej wydajności.

Stworzyłem test jsperf, aby zobaczyć różnicę prędkości, a children()metoda pokonała podejście selektora dziecka (#foo> div) o co najmniej 60% w Chrome (wersja kanaryjska v15) o 20-30% w przeglądarce Firefox (v4).

Nawiasem mówiąc, nie trzeba dodawać, że te dwa podejścia dają takie same wyniki (w tym przypadku 1000).

[Aktualizacja] Zaktualizowałem test, aby uwzględnić test rozmiaru () w porównaniu z długością i nie mają one większego znaczenia (wynik: lengthużycie jest nieco szybsze (2%) niż size())

[Aktualizacja] Ze względu na niepoprawne znaczniki widoczne w OP (przed aktualizacją „zweryfikowaną znacznikami” przeze mnie), oba $("#foo > div").length& $('#foo').children().lengthskutkowały tym samym ( jsfiddle ). Ale aby uzyskać poprawną odpowiedź, aby uzyskać TYLKO dzieci „div”, jeden POWINIEN użyć selektora podrzędnego, aby uzyskać poprawną i lepszą wydajność

$("#foo > div") 

wybiera wszystkie elementy div, które są bezpośrednimi potomkami #foo,
gdy masz już zestaw elementów podrzędnych , możesz użyć funkcji size:

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

lub możesz użyć

$("#foo > div").length

Oba zwrócą ten sam wynik

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

W odpowiedzi na mrCoders odpowiedz przy użyciu jsperf, dlaczego po prostu nie użyć węzła dom?

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

Możesz wypróbować test tutaj: http://jsperf.com/jquery-child-ele-size/7

Ta metoda daje 46 095 op / s, podczas gdy inne metody w najlepszym przypadku 2000 op / s

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

$("#foo > div").length

jQuery ma funkcję .size (), która zwraca liczbę wystąpień elementu, ale zgodnie z dokumentacją jQuery jest wolniejsza i zwraca tę samą wartość co właściwość .length, dlatego najlepiej jest po prostu użyć rozszerzenia. właściwość length. Stąd: 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>

W najnowszej wersji jquery możesz używać $("#superpics div").children().length.

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

lub

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

Jak już powiedziano, oba zwracają ten sam wynik.
Ale funkcja size () jest bardziej jQuery "PC".
Miałem podobny problem z moją stroną.
Na razie pomiń> i powinno działać dobrze.

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

Spróbuj tego dla bezpośrednich elementów potomnych typu div

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