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

Question

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

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

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

Answer 1

$("#foo > div").length

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

Answer 2

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

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

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

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

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

Answer 3

$("#foo > div") 

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

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

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

$("#foo > div").length

Оба вернут вам одинаковый результат

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

Answer 7

$("#foo > div").length

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

Answer 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>

Answer 9

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

Answer 10

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

или

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

---

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