Contar elementos div filhos imediatos usando jQuery

Eu tenho a seguinte estrutura de nó HTML:

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

Como posso contar o número de filhos imediatos de fooque são do tipo div? No exemplo acima, o resultado deve ser dois ( bare baz).

$("#foo > div").length

Direcione os filhos do elemento com o id 'foo' que são divs. Em seguida, recupere o tamanho do conjunto embrulhado produzido.

Eu recomendo usar $('#foo').children().size()para um melhor desempenho.

Criei um teste jsperf para ver a diferença de velocidade e o children()método superou a abordagem do seletor filho (#foo> div) em pelo menos 60% no Chrome (canary build v15) 20-30% no Firefox (v4).

A propósito, escusado será dizer que essas duas abordagens produzem os mesmos resultados (neste caso, 1000).

[Atualização] Atualizei o teste para incluir o tamanho () versus o comprimento, e eles não fazem muita diferença (resultado: o lengthuso é um pouco mais rápido (2%) do que size())

[Update] Devido à marcação incorreta visto no OP (antes de 'marcação validado' update por mim), ambos $("#foo > div").length& $('#foo').children().lengthresultou o mesmo ( jsFiddle ). Mas, para uma resposta correta, para obter APENAS filhos 'div', deve-se usar o seletor de filhos para obter o desempenho correto e melhor

$("#foo > div") 

seleciona todas as divs que são descendentes imediatos de #foo
depois de ter o conjunto de filhos, você pode usar a função size:

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

ou você pode usar

$("#foo > div").length

Ambos retornarão o mesmo resultado

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

Em resposta à mrCoders, responda usando jsperf, por que não usar apenas o nó dom?

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

Você pode tentar o teste aqui: http://jsperf.com/jquery-child-ele-size/7

Esse método obtém 46.095 op / s, enquanto os outros métodos, no máximo, 2000 op / s

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

$("#foo > div").length

O jQuery possui uma função .size () que retornará o número de vezes que um elemento aparece, mas, conforme especificado na documentação do jQuery, é mais lento e retorna o mesmo valor que a propriedade .length, portanto é melhor simplesmente usar o. propriedade length. A partir daqui: 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>

Com a versão mais recente do jquery, você pode usar $("#superpics div").children().length.

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

ou

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

Como já foi dito, ambos retornam o mesmo resultado.
Mas a função size () é mais jQuery "PC".
Eu tive um problema semelhante com a minha página.
Por enquanto, apenas omita o> e deve funcionar bem.

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

Tente isso para elementos filho imediatos do tipo div

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