Question

问题

似乎jQuery已加载并正在运行，但它正在尝试使用的元素（<div> s）尚未可用，因此它只返回undefined。问题可能是该项目包含AngularJS框架，该框架也使用$符号。知道了这一点，我修改了我的jQuery代码，以jQuery(document).ready(function($) { ...开头，但它似乎没有解决问题。我还添加了jQuery.noConflict();，这也没有帮助。我也试过这种模式：

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});

这不起作用。我尝试在index.html放置jQuery和bootstrap.min.js（因为bootstrap依赖于jQuery）在底部，或脚本的顶部或中间移动脚本。这改变了结果，但仍然是错误的结果。我有时会从undefined undefined undefined 0获得console.log()关于所有div s高度的结果{/ 1}}。

非常奇怪的问题。在我尝试使用jQuery之前，我实际上只是使用了JavaScript，但之后我尝试了jQuery，因为我读到了ready()方法，因为我认为HTML元素本身并没有“准备好”，但还没有使用。 / p>

注意：$("#contentDivision")是该问题最重要的特性，因为它是动态填充的，因此它的高度随着文档的加载而变化，这意味着jQuery需要在$("#contentDivision")填充后加载所有的文字和图片（这是一个博客）。

让我想到这一思路的另一件事是，在chrome控制台中编写我的main.js中完全相同的jQuery代码会产生正确的结果。

我还需要帮助创建某种类型的侦听器或动态重新运行jQuery脚本，以便窗口适当调整每种类型屏幕的高度。

感谢任何帮助，谢谢。

main.js（包含我的jQuery代码）

jQuery.noConflict();
jQuery(document).ready(function($) {
console.log('jQuery(document) is ready');
console.log($(window).height());   // returns height of browser viewport
console.log($(document).height()); // returns height of HTML document
console.log(
    $("#panelDivision").height() + " " +
    $("#scrollDivision").height() + " " +
    $("#contentDivision").height() + " " +
    $("#extraDivision").height()
);

var $max = Math.max($("#contentDivision").height(), $("#extraDivision").height());
console.log($max);

$("#scrollDivision").height($max - $("#panelDivision").height());
$("#contentDivision").height($max);
$("#extraDivision").height($max);
});

我从jQuery获得的输出

jQuery(document) is ready
949
1299
75 0 undefined 800
NaN

index.html（省略了css链接和元标记）

<body ng-app="myApp">
<div class="main_container">
<navbar></navbar>
<div class="container-fluid page-wrap">
    <div class="row">
        <div id="leftDivision" class="col-md-3 paddingRemove side-posts">
            <posts></posts>
        </div>
        <div id="contentDivision" class="col-md-7 paddingRemove white-container" ng-view></div>
        <div id="extraDivision" class="col-md-2 paddingRemove white-container">
            <lorem></lorem>
        </div>
    </div>
</div>
<foobar></foobar>
</div>

<!-- Imported JavaScript Files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Local Angular-related JavaScript Files -->
<script src="client/js/app.js" type="text/javascript"></script>
<script src="client/js/main.controller.js" type="text/javascript"></script>
<script src="client/js/auth.controller.js" type="text/javascript"></script>
<script src="client/js/blog.controller.js" type="text/javascript"></script>
<script src="client/js/directives.js" type="text/javascript"></script>
<script src="client/js/filters.js" type="text/javascript"></script>
<script src="client/js/factories.js" type="text/javascript"></script>

<script src="client/js/main.js" type="text/javascript"></script>
</body>

</html>

Answer 1

ng-view渲染概念的问题。

ngView是一个指令，通过将当前路由的呈现模板包含到主布局（index.html）文件中来补充$ route服务。每当当前路由发生变化时，包含的视图都会根据$ route服务的配置随之改变。

在您的代码中，您在该div上使用ng-view。因此，在完成任何路径更改后将呈现div（Dom元素）。否则div元素将不会呈现，这意味着您无法在html页面源中看到div标记。这就是你未定义的原因。

所以你可以在下面试试。

<div id="contentDivision" class="col-md-7 
paddingRemove white-container">
<div ng-view></div>
</div>

Answer 2

在AngularJS脚本之前加载jQuery脚本：

<!-- Imported JavaScript Files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>

虽然我不得不说，你甚至不需要jQuery，因为AngularJS可以做你想要的所有事情。

jQuery $（“＃Div”）。height（）返回undefined

问题

main.js（包含我的jQuery代码）

我从jQuery获得的输出

index.html（省略了css链接和元标记）

2 个答案: