Подсчитать непосредственные дочерние элементы div, используя jQuery

У меня есть следующая структура узла HTML:

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

Как мне подсчитать количество непосредственных детей fooтого типа div? В приведенном выше примере результат должен быть два ( barи baz).

$("#foo > div").length

Направьте потомков элемента с идентификатором 'foo', который является div. Затем извлекается размер упакованного набора.

Я рекомендую использовать $('#foo').children().size()для лучшей производительности.

Я создал тест jsperf, чтобы увидеть разницу в скорости, и children()метод превзошел подход дочернего селектора (#foo> div) как минимум на 60% в Chrome (сборка сборок v15), на 20-30% в Firefox (v4).

Кстати, само собой разумеется, что эти два подхода дают одинаковые результаты (в данном случае 1000).

[Обновить] Я обновил тест, включив тест size () и длины, и они не имеют большого значения (результат: lengthиспользование немного быстрее (2%), чем size())

[Update] Из - за неправильной разметки видели в OP (до «Разметка ПРОВЕРЯЕМЫЕ» обновление мной), так $("#foo > div").lengthи в $('#foo').children().lengthрезультате один и тот же ( jsfiddle ). Но для правильного ответа, чтобы получить ТОЛЬКО 'div' детей, СЛЕДУЕТ использовать селектор детей для правильной и лучшей производительности

$("#foo > div") 

выбирает все div, которые являются прямыми потомками #foo,
когда у вас есть набор дочерних элементов, вы можете использовать функцию 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 оп / с, в то время как другие методы в лучшем случае 2000 оп / с

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

$("#foo > div").length

В jQuery есть функция .size (), которая будет возвращать количество раз, которое элемент появляется, но, как указано в документации по jQuery, он медленнее и возвращает то же значение, что и свойство .length, поэтому лучше просто использовать. свойство длины. Отсюда: 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>

С самой последней версией jquery вы можете использовать $("#superpics div").children().length.

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

или

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

Как уже было сказано, оба возвращают один и тот же результат.
Но функция size () - это скорее jQuery «ПК».
У меня была похожая проблема с моей страницей.
А пока просто опустите> и все должно работать нормально.

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

Попробуйте это для непосредственных дочерних элементов типа div

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