Как рассчитать высоту и ширину каждого дочернего элемента div

Question

Как рассчитать высоту и ширину дочерних DIVs.

Я хочу вычислить высоту и ширину каждого дочернего DIV, а затем сравнить его ширину и высоту. Если Width больше, чем Height, добавьте class1 , или height больше, чем width, тогда добавьте 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

Возможно, вам нужно быть более точным c - вы хотите проверить ИЗОБРАЖЕНИЕ в div, так как 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 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

Вместо $('.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, конечно, в этом примере!