Contagem elementos div criança imediatos usando jQuery
-
05-07-2019 - |
Pergunta
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
).
Solução
$("#foo > div").length
filhos diretos do elemento com o id 'foo' que são divs. Em seguida, recuperar o tamanho do conjunto envolto produzido.
Outras dicas
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
$("#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
$('#foo').children('div').length
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
$('#foo > div').size()
$("#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 /
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();
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.
Com a versão mais recente do jQuery, você pode usar $("#superpics div").children().length
.
$("div", "#superpics").size();