How to calculate each child div height and width

Question

How calculate height and width of child DIVs.

I want to calculate height and width of each child DIV then compare its width and height. If Width is greater then Height then add class1 or height is greater then width then add class2 . And width is equal to height then add class3

 $(window).load(function() { $('.grid').children().each(function(item) { var divHeight = 0; var divWidth = 0; divHeight = $('.grid-item').height(); divWidth = $('.grid-item').width(); console.log(divWidth); console.log(divHeight); //check if child div's width is greater then height then add some class if ($(this).width() > $(this).height()) { if ($(this).hasClass('class1')) { $(this).removeClass('class1'); } else { $(this).addClass('class1'); } } }); });

 * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ h1 { text-align: center } .grid { background: #DDD; max-width: 1200px; margin: 0 auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Isotope - masonry layout mode</h1> <div class="grid"> <div class="grid-item"> <img src="https://via.placeholder.com/300/09f/fff.png" alt=""> </div> <div class="grid-item"> <img src="https://via.placeholder.com/728x90.png" alt=""> </div> <div class="grid-item"> <img src="https://via.placeholder.com/500x100.png" alt=""> </div> </div>

Answer 1

Instead of $('.grid').children().each(function(item) { use $('.grid-item').each(function(item) { and find element by $(this).height() and width()

 $('.grid-item').each(function(item) { let divHeight = 0; let divWidth = 0; divHeight = $(this).find('img').height(); divWidth = $(this).find('img').width(); if (divWidth > divHeight) { $(this).addClass('class1'); } });

 * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ h1 { text-align: center } .grid { background: #DDD; max-width: 1200px; margin: 0 auto; } .class1 { background: orange }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Isotope - masonry layout mode</h1> <div class="grid"> <div class="grid-item"> <img src="https://via.placeholder.com/300/09f/fff.png" alt=""> </div> <div class="grid-item"> <img src="https://via.placeholder.com/728x90.png" alt=""> </div> <div class="grid-item"> <img src="https://via.placeholder.com/500x100.png" alt=""> </div> </div>

Edit: Based on your comment, you should get width and height of your image, not your div, of course in this example!

Answer 2

Perhaps you need to be more specific - you want to inspect the IMAGE in the div since the divs are all the same width

 $(function() { $('.grid .grid-item').each(function() { var imgHeight = $(this).find("img").height(); var imgWidth = $(this).find("img").width(); //check if child div's width is greater then height then add some class console.log(imgHeight, imgWidth, imgHeight> imgWidth) $(this).toggleClass('class1',imgHeight > imgWidth); }); });

 * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ h1 { text-align: center } .grid { background: #DDD; max-width: 1200px; margin: 0 auto; } .class1 { background-color:red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Isotope - masonry layout mode</h1> <div class="grid"> <div class="grid-item"> <img src="https://via.placeholder.com/300/09f/fff.png" alt=""> </div> <div class="grid-item"> <img src="https://via.placeholder.com/728x90.png" alt=""> </div> <div class="grid-item"> <img src="https://via.placeholder.com/100x500.png" alt=""> </div> </div>

Answer 3

if children of class="grid" is always class="grid-item" better use selector as $('.grid-item')

• also use .outerHeight() and .outerWidth() method to calculate the exact height and width with margins

 $('.grid-item').each(function() { let $this = $(this); let divHeight = parseFloat($this.outerHeight()); let divWidth = parseFloat($this.outerWidth()); let className = ""; //check if child div's width is greater then height then add some class className = divWidth > divHeight ? 'class1' : 'class2'; if (divWidth === divHeight) className = 'class3'; $this.removeClass('class1').removeClass('class2').removeClass('class3').addClass(className); });

 * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ h1 { text-align: center } .grid { background: #DDD; max-width: 1200px; margin: 0 auto; } .class1 { background-color: red; } .class2 { background-color: blue; } .class3 { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Isotope - masonry layout mode</h1> <div class="grid" > <div class="grid-item" style="height:200px;width:200px;" > <img src="https://via.placeholder.com/300/09f/fff.png" alt=""> </div> <div class="grid-item"> <img src="https://via.placeholder.com/728x90.png" alt=""> </div> <div class="grid-item" style="height:203px;width:201px;"> <img src="https://via.placeholder.com/100x500.png" alt=""> </div> </div>