Question

我试图检查哪个div有更高的高度，而不是将一个类放在更大的那个。

我有这段代码

$(document).ready(function () {

    var sideNavMenu = $(".col-md-3").height();
    var mainColumn = $(".col-md-9").height();

    if (sideNavMenu > mainColumn)
    {
        $(".col-md-3").addClass('dotRight');
    }
    else
    {
        $(".col-md-9").addClass('dotLeft');
    }

});

这里的目标是检查sideNavMenu是否大于mainColumn而不是将dotRight放在div标签上。

如果mainColumn更大，则将dotLeft放在其div标签上。

但它不起作用。

任何建议如何更改/改进它。

非常感谢

Answer 1

您应该通过ID而不是类来引用它们，因为页面上可以有多个具有这些类名的元素。应该只有每个ID。

$(document).ready(function () {

  var sideNavMenu = $("#sidebar").height();
  var mainColumn = $("#main").height();

  if (sideNavMenu > mainColumn) {
    $("#sidebar").addClass('dotRight');
  }  else {
    $(".#main").addClass('dotLeft');
  }
});

当然，您需要将ID分别添加到<div>。

jQuery docs说：

获取匹配元素集中第一个元素的当前计算高度，或设置每个匹配元素的高度。

但是，我只是在jsfiddle中使用它，它似乎返回一个包含第一个元素高度的对象。

http://jsfiddle.net/wwx2m/2/

这意味着你应该能够做到：

$(document).ready(function () {

  var sideNavMenu = $(".col-md-3").height();
  var mainColumn = $(".col-md-9").height();

  if (JSON.stringify(sideNavMenu) > JSON.stringify(mainColumn)) {
    $(".col-md-3").addClass('dotRight');
  } else {
    $(".col-md-9").addClass('dotLeft');
  }
});

但我说的第一种方式是首选。这不稳定，因为同一类引入的对象可能更多。我甚至提到它的唯一原因是解释为什么你的原始代码有问题。：）

http://jsfiddle.net/wwx2m/4/

Answer 2

我把jsfiddle放在一起

<html>
<div class='col-md-3'>
</div>
<div class='col-md-9'>
</div>


<script>
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();



if (sideNavMenu > mainColumn){
    $(".col-md-3").addClass('dotRight');
}
else{
    $(".col-md-9").addClass('dotLeft');
}

jsFiddle

updated jsFiddle with Animation

Jquery检查高度并添加类

2 个答案: