Contagem elementos div criança imediatos usando jQuery

Question

Eu tenho a seguinte estrutura de nó HTML:

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

Como faço para contar o número de filhos imediatos do foo, que são do tipo div? No exemplo acima, o resultado deve ser duas (bar e baz).

Answer 1

$("#foo > div").length

filhos diretos do elemento com o id 'foo' que são divs. Em seguida, recuperar o tamanho do conjunto envolto produzido.

Answer 2

Eu recomendo usar $('#foo').children().size() para um melhor desempenho.

Eu criei um teste JSPerf para ver a diferença de velocidade eo método children() batido o seletor filho ( #foo> abordagem div) em pelo menos 60% no Chrome (canário construção v15) 20-30% no Firefox (v4).

A propósito, escusado será dizer, estas duas abordagens produzem mesmos resultados (neste caso, 1000).

[Update] Eu atualizei o teste para incluir o tamanho () vs teste de comprimento, e eles não fazem muita diferença (resultado: uso length é ligeiramente mais rápido (2%) do que size())

[Update] Devido à marcação incorreta visto no OP (antes de 'marcação validado' update por mim), ambos $("#foo > div").length & $('#foo').children().length resultou o mesmo ( jsFiddle ). Mas para a resposta correta para obter apenas as crianças 'div', deve-se usar seletor filho para o desempenho correto e melhor

Answer 3

$("#foo > div") 

seleciona todos os divs que são descendentes imediatos de #foo
uma vez que você tem o conjunto de crianças que você pode usar a função size:

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

ou você pode usar

$("#foo > div").length

Ambos vão retornar o mesmo resultado

Answer 4

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

Answer 5

Em resposta a mrCoders resposta usando JSPerf por que não usar o nó DOM?

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

Você pode tentar o teste aqui: http://jsperf.com/jquery-child -ele-size / 7

Este método obtém 46.095 op / s, enquanto os outros métodos na melhor das hipóteses 2000 op / s

Answer 6

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

Answer 7

$("#foo > div").length

jQuery tem uma função .size () que irá retornar o número de vezes que um aparece elemento, mas, conforme especificado na documentação do jQuery, é mais lento e retorna o mesmo valor que a propriedade .length por isso é melhor do que simplesmente usar a propriedade .length. A partir daqui: http://www.electrictoolbox.com/get-total -número-pareados por elementos-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();

ou

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

---

Como já foi dito, ambos retornam o mesmo resultado.
Mas a função size () é mais jQuery "P.C".
Eu tive um problema semelhante com a minha página.
Por agora, basta omitir o> e ele deve funcionar bem.

Answer 10

Com a versão mais recente do jQuery, você pode usar $("#superpics div").children().length.

Answer 11

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