Count elements on the screen

Question

I wonder if there is the possibility of me counting the elements on the screen, for example a function that lists the amount of <li> arranged on my website.

How could I do that? And how would this function work?

Answer 1

You can do it like this:

function contar(what){
   return document.querySelectorAll(what).length; 
}

For example on this page using contar('li') gives 92. With this function you can pass a CSS selector like ul li.nome which also works.

Example: http://jsfiddle.net/x082v700/

Answer 2

With pure javascript you can do so:

document.querySelectorAll('li').length

length return the quantity of items present in your document.

Answer 3

You can use Jquery to do this, for example

$('li').size();

you can also put a class on li type <li class="item"> and use

$('.item').size();

so do not risk taking all the read present on the page.

Answer 4

Your best solution without doubt will be with the .length and how it’s such a simple thing it doesn’t even need the jquery.

I would only change one question, the selector, in some tests in the browsers the document.getElementsByTagName is faster than document.querySelectorAll.

getelementsbytagname vs querySelectorAll

So if you take all the elements I read and tell and your problem would indicate something like this:

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>

Answer 5

This way it is possible, the script will scan all elements li.

@Edit: Simplified form.

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: Count implementation.

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>

Answer 6

Ten easier, do it like this

$('li').length

ready, simple, easy and clean

Answer 7

try this with Jquery:

 var i = 0;
 $('li').each(function(){
     i++                         
 });
 alert(i);