Подсчитайте непосредственные дочерние элементы 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 () < Метод / code> превзошел подход дочернего селектора (#foo > div) как минимум на 60% в Chrome (сборка канареек v15) на 20-30% в Firefox (v4). ).

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

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

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

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 размера / 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 -количество-совпадающая-элементы-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

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

или

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

---

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

Answer 10

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

Answer 11

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