如何計算每個子div的高度和寬度

Question

如何計算子 DIV 的高度和寬度。

我想計算每個子 DIV 的高度和寬度，然后比較它的寬度和高度。 如果寬度大於高度然后添加class1或高度大於寬度然后添加class2 。 並且寬度等於高度然后添加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

而不是$('.grid').children().each(function(item) {使用$('.grid-item').each(function(item) {並通過$(this).height()和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>

編輯：根據你的評論，你應該得到圖像的寬度和高度，而不是你的 div，當然在這個例子中！

Answer 2

也許您需要更具體 - 您想檢查 div 中的 IMAGE，因為 div 的寬度都相同

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

如果class="grid"孩子總是class="grid-item"更好地使用選擇器作為$('.grid-item')

• 還使用.outerHeight()和.outerWidth()方法計算帶有邊距的精確高度和寬度

 $('.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>