Cuente elementos div secundarios inmediatos utilizando jQuery

Tengo la siguiente estructura de nodo HTML:

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

¿Cómo cuento el número de hijos inmediatos fooque son de tipo div? En el ejemplo anterior, el resultado debe ser dos ( bary baz).

$("#foo > div").length

Dirija a los hijos del elemento con el id 'foo' que son divs. Luego recuperando el tamaño del conjunto envuelto producido.

Recomiendo usar $('#foo').children().size() para un mejor rendimiento.

Creé una prueba jsperf para ver la diferencia de velocidad y el children()método superó el enfoque del selector secundario (#foo> div) en al menos un 60% en Chrome (canary build v15) 20-30% en Firefox (v4).

Por cierto, no hace falta decir que estos dos enfoques producen los mismos resultados (en este caso, 1000).

[Actualización] He actualizado la prueba para incluir el tamaño () frente a la prueba de longitud, y no hacen mucha diferencia (resultado: el lengthuso es ligeramente más rápido (2%) que size())

[Actualización] Debido al marcado incorrecto visto en el OP (antes de la actualización 'marcado validado' por mí), ambos $("#foo > div").lengthy $('#foo').children().lengthresultaron iguales ( jsfiddle ). Pero para obtener una respuesta correcta para obtener SOLO hijos 'div', uno DEBE usar el selector de niños para un rendimiento correcto y mejor

$("#foo > div") 

selecciona todos los divs que son descendientes inmediatos de #foo
una vez que tiene el conjunto de hijos, puede usar la función de tamaño:

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

o puedes usar

$("#foo > div").length

Ambos te devolverán el mismo resultado

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

En respuesta a la respuesta de mrCoders usando jsperf, ¿por qué no solo usar el nodo dom?

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

Puedes probar la prueba aquí: http://jsperf.com/jquery-child-ele-size/7

Este método obtiene 46.095 op / s, mientras que los otros métodos en el mejor de 2000 op / s

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

$("#foo > div").length

jQuery tiene una función .size () que devolverá la cantidad de veces que aparece un elemento pero, como se especifica en la documentación de jQuery, es más lento y devuelve el mismo valor que la propiedad .length, por lo que es mejor simplemente usar. Propiedad de longitud. Desde aquí: 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>

Con la versión más reciente de jquery, puede usar $("#superpics div").children().length.

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

o

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

Como ya se dijo, ambos devuelven el mismo resultado.
Pero la función size () es más jQuery "PC".
Tuve un problema similar con mi página.
Por ahora, simplemente omita el> y debería funcionar bien.

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

Pruebe esto para elementos secundarios inmediatos de tipo div

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