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




class child (10)

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

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

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

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


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

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

$("#foo > div") 

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

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

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

$("#foo > div").length

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


С самой последней версией jquery вы можете использовать $("#superpics div").children().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").length

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


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

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

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

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


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

или

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

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


$("#yourdropdownid option:selected").text();




javascript jquery dom jquery-selectors