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


4 Answers

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

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

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

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

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

Question

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

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

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




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



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>



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



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




Related