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

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

也许您需要更具体-由于div的宽度相同，所以您想检查div中的IMAGE

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