Считайте непосредственные дочерние элементы div с помощью jQuery

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

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

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

Ответ 1

$("#foo > div").length

Прямые дочерние элементы элемента с id 'foo', которые являются div. Затем извлечение размера завернутого набора.

Ответ 2

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

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

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

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

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

Ответ 3

$("#foo > div")

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

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

или вы можете использовать

$("#foo > div").length

Оба возвращают вам тот же результат

Ответ 4

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

Ответ 5

В ответ на mrCoders ответьте, используя jsperf, почему бы просто не использовать dom node?

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

Вы можете попробовать тест здесь: http://jsperf.com/jquery-child-ele-size/7

Этот метод получает 46 095 оп/с, тогда как другие методы в лучшем случае 2000 op/s

Ответ 6

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

Ответ 7

$("#foo > div").length

В jQuery есть функция .size(), которая будет возвращать количество раз, которое элемент появляется, но, как указано в документации по jQuery, он медленнее и возвращает то же значение, что и свойство .length, поэтому лучше просто используйте свойство .length. Отсюда: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Ответ 8

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>

Ответ 9

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

или

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

Как уже было сказано, оба возвращают тот же результат.
Но функция size() больше jQuery "P.C".
У меня была аналогичная проблема с моей страницей.
На данный момент просто опустите > , и он должен работать нормально.

Ответ 10

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

Ответ 11

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

Ответ 12

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

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