Question

是否可以测量一组具有相同类别的元素的总高度？

我有以下代码：

<ul class="wrapper">
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
</ul>

我想知道所有row-1元素的总高度。我无法使用容器的高度，因为其中可能还有其他我不希望知道容器高度的元素。

Answer 1

您可以使用document.getElementsByClassName('row-1')获取所有元素，然后对其进行循环，在每次迭代中获取每个元素的高度，然后将其添加到总变量（totalHeight）中。

在代码段中，我还提供了一种使用ES6的reduce方法来实现此目标的方法，您可以在一行中实现相同的输出：

有关工作示例，请参见下面的代码段

：

let rows = document.getElementsByClassName("row-1"); // Get all the elements with the class "row-1"
let totalHeight = 0; // Set an accumulator variable to `0`
for(let i = 0; i < rows.length; i++) { // Loop through each element with the class "row-1"
  totalHeight += rows[i].offsetHeight; // Add the height of the element to the accumulator variable (the total)
}
console.log(totalHeight); // Output the total height to the console

// ES6 way:
console.log(Array.prototype.reduce.call(rows, (acc, elem) => acc + elem.offsetHeight, 0));

<ul class="wrapper">
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
</ul>

*注意，我使用了.offsetHeight，其中包括高度，垂直填充和垂直边框。您可以使用其他高度测量值，例如.clientHeight

Answer 2

jquery中存在一个简单的解决方案。只需在每个height()元素上使用row-1方法。 each函数将迭代给定类的所有元素并返回最终高度。

var height = 0;
$(".row-1").each(function() {
  height += $(this).height();
});
console.log(height);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="wrapper">
		<li class="row-1">
			<a>This is row 1</a>
		</li>
		<li class="row-1">
			<a>This is row 1</a>
		</li>
		<li class="row-1">
			<a>This is row 1</a>
		</li>
		<li class="row-1">
			<a>This is row 1</a>
		</li>
	</ul>

Answer 3

尝试一下：

var height = Array.from(document.querySelectorAll('.wrapper .row-1')).map(el => el.clientHeight).reduce((a, b) => a + b, 0)

Answer 4

使用jQuery：

$(document).ready(function(){

  var height = 0;
  $.each( $(".row-1"), function( key, value ) {
     height += $(value).height();
  });

  console.log(height);
});

<html>

    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<ul class="wrapper">
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
  <li class="row-1">
    <a>This is row 1</a>
  </li>
</ul>
</body>
</html>

测量同一类别的元素的总高度

4 个答案: