Javascript Jquery检查高度并添加类_Javascript_Jquery_Html_Css

Javascript Jquery检查高度并添加类

javascript jquery html css

Javascript Jquery检查高度并添加类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图检查哪个div的高度更大，而不是将一个类放在一个更大的类中我有这个密码 $(document).ready(function () { var sideNavMenu = $(".col-md-3").height(); var mainColumn = $(".col-md-9").height(); if (sideNavMenu > mainColumn) { $(".col-md-3").addClass('dotRigh

我试图检查哪个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是否大于其div标记上的mainColumn而不是PlaceDotRight

如果Main列较大，则将dotLeft放置在其div标记上

但它不起作用

任何关于如何改变/改进的建议

非常感谢

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

$(document).ready(function () { var sideNavMenu = $("#sidebar").height(); var mainColumn = $("#main").height(); if (sideNavMenu > mainColumn) { $("#sidebar").addClass('dotRight'); } else { $(".#main").addClass('dotLeft'); } });
当然，您需要分别将id添加到
中
他们说：
获取匹配元素集中第一个元素的当前计算高度，或设置每个匹配元素的高度
但是，我只是在jsfiddle中使用它，它似乎返回了一个对象，其中包含第一个元素的高度

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

$(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'); } });
但我说的第一种方式更可取。这是不稳定的，因为同一个类可以引入更多的对象。我提到它的唯一原因是为了解释为什么您的原始代码有问题。：）

我为您准备好了JSFIDLE

<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'); }

var sideNavMenu=$（“.col-md-3”）.height（）； var main column=$（.col-md-9”）.height（）；如果（sideNavMenu>Main列）{ $（.col-md-3”）.addClass（'dotRight'）； } 否则{ $（.col-md-9”）.addClass（'dotLeft'）； }

如果您试图创建一个只在左右列之间添加点边框的样式，您可能会使用绝对定位的伪元素，而不是尝试执行
console.log（sideNavMenu+“”+mainColumn）检查你的高度是否正确有什么问题？未添加该类，或者该类已添加，但您没有获得预期的外观？该类未在console.log中添加，并显示错误：ReferenceError:$未定义 I仍收到此错误ReferenceError:$未定义defined@KleberBH这意味着您的jQuery库没有正确加载。好的，修复了它，我只是在jquery库脚本之后放置了script标记，效果很好。@KleberBH这可能是个问题。就我个人而言，我总是在标题后面加载jquery，并确保它是第一个加载的东西<代码>此站点…