如何计算每个子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

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

Answer 2

使用$('.grid-item').each(function(item) { 代替$('.grid').children().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 3

也许您需要更具体一些 - 您想检查 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>