I am trying to get the highest element from a group with the class .bottom and set them all to have a height of that value.

My code I have now:

   equalHeight(){
        const newsBlokken = document.querySelectorAll('#news .bottom');
        let highest = 0;
    
        newsBlokken.forEach(function(item) {
            console.log(item.getBoundingClientRect().height);
            const itemH = item.getBoundingClientRect().height;
            highest = items > highest ? itemH : highest;
        });
        console.log(highest);
    }

The weird thing is that if I console log item I get 150 3 times and if I log highest I also get 150 while one of the elements is definitely larger.

If I just console log newsBlokken outside of the loop and inspect the array I see that the last one has: offsetHeight: 195 while the first two have 150. How come it doesn't get the 195? ClientHeight also has 195 for the last element.

What am I missing?

As you can see the elements are not the same height:

HTML:

<section id="news" >
   <div >
      <div  style="padding-bottom: 242px;">
         <div >
            <div >
               <h2 >Our latest news</h2>
               <a  href="#">
               <span>View more</span>
               <span ></span>
               </a>
            </div>
         </div>
      </div>
      <div >
         <div >
            <div  style="margin-top: -242px;">
               <div  style="transform: translate3d(0px, 0px, 0px);">
                  <div  style="width: 443.333px; margin-right: 25px;">
                     <a  href="">
                        <div >
                           <img src="img.jpg" alt="alt">
                           <div >
                              <h3>Title</h3>
                              <span ></span>
                           </div>
                        </div>
                     </a>
                  </div>
                  <div  style="width: 443.333px; margin-right: 25px;">
                     <a  href="">
                        <div >
                           <img src="img.jpg" alt="alt">
                           <div >
                              <h3>Title</h3>
                              <span ></span>
                           </div>
                        </div>
                     </a>
                  </div>
                  <div  style="width: 443.333px; margin-right: 25px;">
                     <a  href="">
                        <div >
                           <img src="img.jpg" alt="alt">
                           <div >
                              <h3>Title</h3>
                              <span ></span>
                           </div>
                        </div>
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

CodePudding user response：

It can be done by using Math.max() by creating an array of heights of the elements.

Try the below code

function equalHeight () {
    const newsBlokken =  Array.from(document.querySelectorAll('#news .bottom'));
    const highest = Math.max(
        ...newsBlokken.map(item => item.getBoundingClientRect().height)
    );
    console.log(highest)
    return highest
}

CodePudding user response：

You can use both CSS & JavaScript

CSS solution: use flexbox attributes.
According to W3 Documentation, you can have the same height of one element, in this case .bottom to fit their height.

.bottom{align-items: stretch; display: flex;}

<div >
  <button type="button" style="min-height: 30px;">Try</button>
  <button type="button" style="min-height: 50px;">Flexbox</button>  
  <button type="button" style="min-height: 190px;">Instead</button>
</div>

---

JavaScript solution.
In this case you should check every .bottom elements height to set it too on others elements.

let buttons = document.querySelectorAll('.bottom');
let maxHeight = 0;
   
for (let i = 0; i < buttons.length; i  ) {
    if (buttons[i].offsetHeight > maxHeight) {
        maxHeight = buttons[i].offsetHeight;
    }
}
    
for (let i = 0; i < buttons.length; i  ) {
    buttons[i].style = "height: "   maxHeight   "px";
}

<div >
  <button  style="height: 30px">Try</button>
  <button  style="height: 20px">JavaScript</button>
  <button  style="height: 50px">Here</button>
</div>

CodePudding user response：

Hope it works for you !!!

jQuery(document).ready(function() {
            equalheight('.box');
        });
        
        
        jQuery(window).resize(function() {
             equalheight('.box');
        });
        
        equalheight = function(container) {
            var currentTallest = 0
            , currentRowStart = 0
            , rowDivs = new Array()
            , $el
            , topPosition = 0;
            jQuery(container).each(function($) {
                $el = jQuery(this);
                jQuery($el).height('auto')
                topPostion = $el.offset().top;

                if (currentRowStart != topPostion) {
                    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv  ) {
                        rowDivs[currentDiv].height(currentTallest);
                    }
                    rowDivs.length = 0;
                    currentRowStart = topPostion;
                    currentTallest = $el.height();
                    rowDivs.push($el);
                } else {
                    rowDivs.push($el);
                    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
                }
                    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv  ) {
                    rowDivs[currentDiv].height(currentTallest);
                }
            });
        }

* {box-sizing: border-box;}
        .box-container {display: flex; flex-wrap: wrap; max-width: 800px; }
        .box {width:30%; padding: 10px; margin: 0 1.5%; background: #ccc; padding: 15px;}
        .box h2 {margin: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <div >
            <h2>Lorem Ipsum is simply</h2>
        </div>
        <div >
            <h2>Lorem Ipsum is simply dummy text of the printing</h2>
        </div>
        <div >
            <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
        </div>
    </div>