How to get max height of elements by classname useing javascript?

Question

How to get max height of elements by classname useing 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>

I use this code for get all of div height, when test this code, it's will be alert 18 90 36 and 54, it's work good.

But i want to set max value of height in this case is 90 to var max_height , how can i do ?

Possible duplicate of [element with the max height from a set of elements](https://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements) — Isaac, Aug 08 '18 at 03:24

score 0 · Accepted Answer · edited Aug 08 '18 at 02:21

Just initialize max_height to 0 and set it to Math.max of itself and each div height:

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

CertainPerformance · Answer 2 · 2018-08-08T02:48:08.507

Another option would be to spread the mapped heights into 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>

Or, with more 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>

How to get max height of elements by classname useing javascript?

2 Answers2