Порахуйте безпосередні дочірні елементи 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', який є дівами. Потім отримайте розмір виробленого загорнутого набору.

Я рекомендую використовувати $('#foo').children().size()для кращої роботи.

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

До речі, що ці два підходи дають однакові результати (у даному випадку 1000).

[Оновити] Я оновив тест, щоб включити тест size () vs length, і вони не мають великої різниці (результат: lengthвикористання трохи швидше (2%), ніж size())

[Оновлення] Через неправильну розмітку, помічену в ОП (до мого оновлення "перевірена розмітка"), обидві $("#foo > div").length& отримали$('#foo').children().length однакове ( jsfiddle ). Але для правильної відповіді, щоб отримати ТОЛЬКІ «діві» дітей, ОДИН ДОБРІ використовувати добірчик для правильної та кращої роботи

$("#foo > div") 

вибирає всі диви, які є безпосередніми нащадками #foo,
коли у вас є набір дітей, ви можете використовувати функцію розміру:

$("#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/

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