-1

I have 3 divs in a row and each div contains a paragraph of text.

How do I find the tallest div out of the three in native JS?

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
Mark
  • 552
  • 1
  • 6
  • 19
  • 1
    Can you please provide at least your code and maybe a code snippet on jsFiddle or something similar - event if it is not working. We won't code for you ... – Mario Murrent May 02 '18 at 09:18
  • Thats the problem I don't know where to start with the code – Mark May 02 '18 at 09:20
  • 2
    Well but then you should probably think about starting with the basics of programming? – Mario Murrent May 02 '18 at 09:22
  • 1
    1- get the elements from the DOM, from the class (or adding an id attribute to their html and getting from it). 2- get their height. 3- compare them 4- if a specific problem in your code, ask about it here with the non-working code and error – Kaddath May 02 '18 at 09:23

7 Answers7

3

var biggestHeight = 0;
var elements = document.querySelectorAll('div.block-text');
elements.forEach(function(element, index){
    console.log('div ' + index + ' height  = ' + element.offsetHeight + 'px');
    biggestHeight = element.offsetHeight > biggestHeight ? element.offsetHeight : biggestHeight;
});

console.log('biggestHeight = ' + biggestHeight + 'px');
<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
caramba
  • 21,963
  • 19
  • 86
  • 127
1

I'll try make this answer helpful, from a learner's perspective.

You say native JS - though, if you're doing everything straight up javascript (ie. you're not using a framework like React or Angular) - then you might as well use JQuery - which basically has some convenience methods and a shorter syntax.

I'm assuming also that you're using ES5 here, so I won't use any ES6 functions.

The first thing is that you'll want to find all your div elements:

I'm going to google 'find element by class javascript'. I typically go for the first mozilla result, which is Document.getElementsByClassName().

So our first line is:

var elements = document.findElementsByClassName('block-text'); 

This will contain an array of html elements.

The next thing we need to do is iterate over the elements.

Now javascript has a bunch of convenient Array functions. Take a look at the documentation here: Array.prototype

Let's see if we can find a function there that will do this real tidily.

It looks like Array.reduce() will do what we're looking for.

Ok, whoops! It looks like what's returned from document.getElementsByClassName isn't an Array, but a HTMLCollection. But we can convert this by using this solution.

We can do something like this:

var arr = [].slice.call(elements);

arr.reduce(function(acc, v) {
   //return the div with the higher height
});

Thirdly, we need to measure the height of a div.

Imma google 'find height of div javascript': We'll use the first stack overflow result.

Putting it all together, it looks like:

var elements = document.getElementsByClassName('block-text'); 

var arr = [].slice.call(elements);

var tallest = arr.reduce(function(acc, v) {
 return (acc.clientHeight > v.clientHeight) ? acc : v;
}); 

console.log(tallest); 
<div class="block-text a">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text b">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text c">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
dwjohnston
  • 11,163
  • 32
  • 99
  • 194
0

You can do it this way

Steps:

  1. Get all the elements with the selector
  2. Loop through them to get the height and any unique identifier for all the elements
  3. Get the maximum height
  4. Get the element whose height is the maximum (what you got in 3rd step)

var els = document.querySelectorAll(".block-text"),
    arr = [];

for(var i=0; i< els.length; i++){
   arr.push({id: els[i].id,height: els[i].clientHeight});
}

console.log("Maximun height ",Math.max(...arr.map(o=> o.height)))

console.log("element with the id ", arr.find(e=>e.height ===Math.max(...arr.map(o=> o.height))).id)
<div class="block-text" id="1">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text" id="2">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text" id="3">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
Muhammad Usman
  • 10,039
  • 22
  • 39
0

If I don't misunderstood your question this is what you need.

var divs = document.getElementsByClassName('block-text');
var allDivsHeight = [];
for (i = 0; i < divs.length; i++) {
  allDivsHeight.push(divs[i].offsetHeight);
}
console.log(allDivsHeight);//just for debugging
console.log(Math.max(...allDivsHeight))
<div class="block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
A l w a y s S u n n y
  • 36,497
  • 8
  • 60
  • 103
0

please try below script

var allDiv = document.querySelectorAll('.block-text');
var maxHeight = null;
for(var i=0; i< allDiv.length; i++){
  if(!maxHeight){
 maxHeight = allDiv[i].scrollHeight;
  }

 if(maxHeight < allDiv[i].scrollHeight){
 maxHeight = allDiv[i].scrollHeight
 }
}

console.log("maxHeight div : " , maxHeight);
<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
Pratik Parekh
  • 447
  • 4
  • 19
0

You can do the following with forEach() and clientHeight:

var divs = document.querySelectorAll('.block-text');
var height = 0;
divs.forEach(function(d){
  height = height < d.clientHeight ?  d.clientHeight : height;
});
console.log('Tallest div height:', height);
<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
Mamun
  • 66,969
  • 9
  • 47
  • 59
0

Get all div heights and sort in descending order to get max height

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => [i, s.scrollHeight] );
//sort the values by height, second index value
heightsByIndex.sort( (a, b) => b[1] - a[1] );

console.log("Max height " , heightsByIndex[0][1]);

Demo

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => [i, s.scrollHeight] );
//console.log(heightsByIndex);

//sort the values by height, second index value
heightsByIndex.sort( (a, b) => b[1] - a[1] );

console.log("Max height " , heightsByIndex[0][1]);
<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>

Or just get all the heights in an array and get max value.

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => s.scrollHeight );

console.log("Max height " , Math.max.apply(null,heightsByIndex));

Demo

var heightsByIndex = [...document.querySelectorAll( "div" )].map( (s,i) => s.scrollHeight );
//console.log(heightsByIndex);

console.log("Max height " , Math.max.apply(null,heightsByIndex));
<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>

<div class="block-text">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>
gurvinder372
  • 66,980
  • 10
  • 72
  • 94