Подсчет непосредственных дочерних элементов 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).

168
dom javascript jquery jquery-selectors

11 ответов

$("#foo > div").length

прямые дочерние элементы элемента с идентификатором "foo", которые являются divs. После этого извлекать размер произведенного обернутого набора.

320

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

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

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

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

[Update] из-за неправильной разметки, замеченной в OP (перед обновлением "проверенной разметки" мной), оба $("#foo > div").length & $('#foo').children().length результат тот же (jsfiddle). Но для правильного ответа, чтобы получить только " div " детей, следует использовать child selector для правильной и лучшей производительности

66
$("#foo > div")

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

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

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

$("#foo > div").length

оба вернут вам тот же результат

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

в ответ на ответ 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

8
$('#foo > div').size()
6
$("#foo > div").length

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

5
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>
4
var n_numTabs = $("#superpics div").size();

или

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

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

2

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

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