Question

我有很多需要计算的HTML元素

<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>

我如何计算出现如下

<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>

我试过搜索SO和互联网，但没有任何东西适合我的需求。提前感谢任何建议。

Answer 1

您应该计算.length属性。

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>

Answer 2

你可以循环遍历任何DOM元素，如下所示..

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

使用jQuery计算HTML元素

2 个答案: