如何使用jQuery查找DIV的渲染高度？

Question

I am attempting to find the rendered height of two div. They have the same class (.defense) but are within separate containers (side-1 and side-2). I need to use these heights, as the height is set to auto in the CSS, to use in my jQuery to decide which should the be the height of both divs when loaded.

Here is my jQuery code: $(document).ready(function() { $(window).load(function() {

      var sideOneDefense = $('.side-1 .defense').height();
      var sideTwoDefense = $('.side-2 .defense').height();

      if (sideOneDefense >= sideTwoDefense) {
        $('.defense').css("height",sideOneDefense)
      }
      else {
        $('.defense').css("height",sideTwoDefense)
      }
    });
});

Answer 1

You are using the code on load by the way after dom is ready the value is not what you expect. Use the code inside ready handler instead:

$(document).ready(function() {

  var sideOneDefense = $('.side-1 .defense').height();
  var sideTwoDefense = $('.side-2 .defense').height();

  if (sideOneDefense >= sideTwoDefense) {
    $('.defense').css("height",sideOneDefense)
  }
  else {
    $('.defense').css("height",sideTwoDefense)
  }
});