Question

如何使用javascript通过类名获取元素的最大高度？

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<div class="test">test</div>
<div class="test">test<br>test<br>test<br>test<br>test</div>
<div class="test">test<br>test</div>
<div class="test">test<br>test<br>test</div>

<script>
	var test_elements = document.getElementsByClassName("test");
	for (var i = 0; i < test_elements.length; i++) {
		var test_elements_width = $(test_elements[i]).height();
		alert(test_elements_width);
	}
</script>

我使用此代码获取所有div高度，在测试该代码时，它会发出警告18 90 36 and 54，效果很好。

但是我想在这种情况下将高度的最大值设置为90到var max_height，我该怎么办？

Answer 1

只需将max_height初始化为0并将其设置为本身和每个div高度的Math.max：

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<div class="test">test</div>
<div class="test">test<br>test<br>test<br>test<br>test</div>
<div class="test">test<br>test</div>
<div class="test">test<br>test<br>test</div>

<script>
  var test_elements = document.getElementsByClassName("test");
  var max_height = 0;
  for (var i = 0; i < test_elements.length; i++) {
    var test_elements_width = $(test_elements[i]).height();
    alert(test_elements_width);
    max_height = Math.max(max_height, test_elements_width);
  }
</script>

Answer 2

另一种选择是将映射的height扩展为Math.max ：

console.log(Math.max(
  ...[...document.querySelectorAll('.test')]
    .map(test => $(test).height())
));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">test</div>
<div class="test">test<br>test<br>test<br>test<br>test</div>
<div class="test">test<br>test</div>
<div class="test">test<br>test<br>test</div>

或者，使用更多jQuery：

console.log(Math.max(
  ...$('.test')
    .map((i, test) => $(test).height())
    .get()
));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">test</div>
<div class="test">test<br>test<br>test<br>test<br>test</div>
<div class="test">test<br>test</div>
<div class="test">test<br>test<br>test</div>

如何使用javascript通过类名获取元素的最大高度？

2 个答案: