Count HTML elements with jQuery

Question

I have lots HTML elemts that needs to be counted

<div data-stars="2" data-board="Half Board">STARS 2 / HB</div>
<div data-stars="2" data-board="Half Board">STARS 2 / HB</div>
<div data-stars="4" data-board="Half Board">STARS 4 / HB</div>
<div data-stars="4" data-board="Full Board">STARS 4 / FB</div>
<div data-stars="3" data-board="Half Board">STARS 3 / HB</div>

How can i count the to appear as below

<h4 class="total-found">5</h4>
<h4 class="total-found-3stars">1</h4>
<h4 class="total-found-4stars">2</h4>
<h4 class="total-found-2stars">2</h4>
<h4 class="total-found-HB">4</h4>
<h4 class="total-found-HB">1</h4>

I have tried searching over SO and internet but nothing fits to my needs. Thanks in advance for any advise.

It can be done in javascript. Just do .length on the elements that you to count. — dowomenfart
– dowomenfart, Commented Feb 16, 2015 at 20:03
the how many divs with data-stars 3, how many divs with data-stars 4... and how many elements with data-hoard Full Board and etc.. — em0tic0n
– em0tic0n, Commented Feb 16, 2015 at 20:03

emmanuel · Accepted Answer · 2015-02-16 20:54:12Z

You should count the .length of attributes.

var two_stars = $('div[data-stars="2"]').length;
var three_stars = $('div[data-stars="3"]').length;
var four_stars = $('div[data-stars="4"]').length;
var five_stars = $('div[data-stars="5"]').length;
var total = two_stars + three_stars + four_stars + five_stars;
$('.total-two').text(two_stars);
$('.total-three').text(three_stars);
$('.total-four').text(four_stars);
$('.total-five').text(five_stars);
$('.total').text(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div data-stars="2" data-board="Half Board">STARS 2 / HB</div>
<div data-stars="2" data-board="Half Board">STARS 2 / HB</div>
<div data-stars="4" data-board="Half Board">STARS 4 / HB</div>
<div data-stars="4" data-board="Full Board">STARS 4 / FB</div>
<div data-stars="3" data-board="Half Board">STARS 3 / HB</div>
<br>
Two stars: <span class="total-two"></span><br>
Three stars: <span class="total-three"></span><br>
Four stars: <span class="total-four"></span><br>
Five stars: <span class="total-five"></span><br>
Sum: <span class="total"></span>

Sam · Accepted Answer · 2015-02-16 20:06:01Z

0

you can loop through any DOM element as follows..

var allElements = document.getElementsByTagName("*");
for (var i=0, max=allElements .length; i < max; i++)
{
    // Do something with the element here
}

answered Feb 16, 2015 at 20:06

Sam

1

Collectives™ on Stack Overflow

Count HTML elements with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related