Подсчет непосредственных дочерних элементов 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
).
11 ответов
$("#foo > div").length
прямые дочерние элементы элемента с идентификатором "foo", которые являются divs. После этого извлекать размер произведенного обернутого набора.
Я рекомендую использовать $('#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 для правильной и лучшей производительности
$("#foo > div")
выбирает все divs, которые являются непосредственными потомками #foo
после того, как у вас есть набор детей, вы можете использовать функцию размера:
$("#foo > div").size()
или вы можете использовать
$("#foo > div").length
оба вернут вам тот же результат
в ответ на ответ 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
$("#foo > div").length
jQuery имеет .функция size (), которая возвращает количество раз, когда элемент появляется, но, как указано в документации jQuery, он медленнее и возвращает то же значение, что и .свойство length поэтому лучше всего просто использовать .свойство length. Отсюда: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/
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>
var n_numTabs = $("#superpics div").size();
или
var n_numTabs = $("#superpics div").length;
Как уже было сказано, оба возвращают один и тот же результат.
но функция size () больше jQuery "P. C".
у меня была аналогичная проблема с моей страницей.
на данный момент, просто опустите>, и он должен работать нормально.