Gostaria de saber se há a possibilidade de eu contar os elementos na tela, por exemplo uma função que listasse a quantidade de <li>
dispostos na minha página web.
Como eu poderia fazer isto? E como funcionaria está função?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePodes fazer isso assim:
function contar(what){
return document.querySelectorAll(what).length;
}
Por exemplo nesta página usando contar('li')
dá 92. Com esta função podes passar um seletor de CSS como ul li.nome
que também funciona.
Exemplo: http://jsfiddle.net/x082v700/
Com javascript puro você pode fazer assim:
document.querySelectorAll('li').length
length
retornará a quantidade de items presentes no seu documento.
Você pode utilizar o JQuery para fazer isso, por exemplo
$('li').size();
você também pode colocar uma classe na li tipo <li class="item">
e utilizar
$('.item').size();
assim não corre o risco de pegar todas as li presente na página.
Sua melhor solução sem dúvidas será com o .length
e como é uma coisa tão simples nem tem a necessidade do jquery
.
Eu apenas mudaria uma questão, o seletor, em alguns testes nos navegadores o document.getElementsByTagName
se apresenta mais rápido que document.querySelectorAll
.
getElementsByTagName vs querySelectorAll
Então se pegar todos os elementos li e contar e o seu problema indicaria algo assim:
var li = document.getElementsByTagName('li').length;
document.write('Quantidade de li: ' + li);
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
Desta forma é possível, o script irá varrer todos os elementos li
.
@Edit: Forma simplificada.
var elementos = document.getElementsByTagName('li');
document.writeln('Existem ' + elementos.length);
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
@Edit: implementação do count.
var elementos = document.getElementsByTagName('li');
var count = 0;
Array.prototype.forEach.call(elementos, function(arr) {
console.log(arr);
count++;
});
document.writeln('Existem ' + count);
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Ten mais facil, faz assim
$('li').length
pronto, simples facil e limpo
tenta isso com Jquery:
var i = 0;
$('li').each(function(){
i++
});
alert(i);
size
e a prioriedade length
.