数组.length属性为JavaScript中的document.getElementsByClassName返回0

Question

I have a list of li elements with one class in my HTML. 我在HTML中有一个类的li元素列表。 I want to grab them all and place them in an array and then find out how many have I grabbed. 我想全部抓住它们，并将它们放置在一个阵列中，然后找出我抓住了多少。 However, whenever I try to output the .length property of the array that the document.getElementsByClassName is in, it is just resulting to 0 . 但是，每当我尝试输出document.getElementsByClassName所在的数组的.length属性时，它只会导致结果为0 。 Here's my code: 这是我的代码：

function activateFeedMain() {
        console.log('Function Called');
        var clickInfo = document.getElementsByClassName('miniInfo');
        var showInfo = document.getElementsByClassName('moreInfo');

        console.log(clickInfo.length);
    }

    activateFeedMain();

Here's the HTML: 这是HTML：

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta id="refresh" http-equiv="refresh" content="300">
<title>News and Events</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/hfreplacement.js"></script>
<script type="text/javascript" src="scripts/news.js"></script>
<style type="text/css">
    #content-col1 ul {list-style-type: none;}
    #content-col1 ul li {background-color: #66FFCC; border-radius: 5px; padding: 12px; margin-bottom: 8px;}
    #content-col1 ul li:hover {background-color: #FFFFCC;}
    .description {font-weight: bold; font-style: italic;}
    .date, .type, .approval {font-size: 12pt; padding-right: 25px; padding-left: 18px; display: inline-block; border-right: 1px solid black;}
    .date {padding-left: 0px;}
    .approval {border: none;}
    .invisible {display: none;}
    #content-col1 ul a:hover {text-decoration: none;}
    #content-col1 ul a {text-decoration: none; cursor: pointer;}

</style>
</head>

<body>
<div id="head"></div>

<div id="content">
    <div id="content-col1">
        <p class="note">Refresh for updates</p>
        <script>newsContent();</script>
    </div>

    <div id="content-col2">
        <h1>Latest</h1>
        <ul>
        </ul>
    </div>
</div>

<div id="foot"></div>
<script type="text/javascript">
    function activateFeedMain() {
        console.log('Function Called');
        var clickInfo = document.getElementsByClassName('miniInfo');
        var showInfo = document.getElementsByClassName('moreInfo');

        console.log(clickInfo.length);
    }

    activateFeedMain();
</script>
</body>
</html>

The Script newsContent(); 脚本newsContent(); installs all the li s in the ul . 将所有li安装在ul 。 On a side note, when I use console.log(clickInfo) it is giving me the list of array. 附带一提，当我使用console.log(clickInfo)它为我提供了数组列表。 Something has to do with the .length property... 与.length属性有关...

Also, when I try to use console.log(clickInfo[1]); 另外，当我尝试使用console.log(clickInfo[1]); , it's giving me undefined... ，这给了我不确定的...

Answer 1

Working fiddle 工作提琴

The reason that you're having this issue is because your newsContent function is dynamically creating creating the content on the page asynchronously , in parallel with your activateFeedMain function. 你遇到这个问题的原因是因为你的newsContent功能动态地创建异步创建页面上的内容，与你平行activateFeedMain功能。 Since they're being called at the same time, the elements from your newsContent function haven't been created at the time that activateFeedMain is being called. 因为他们被称为在同一时间，从你的元素newsContent功能尚未在该时间创建activateFeedMain被调用。

You can solve this issue by giving newsContent a callback function that will be executed when it's finished running. 您可以通过为newsContent一个回调函数来解决此问题，该函数将在完成运行后执行。

function activateFeedMain() {
    console.log('Function Called');
    var clickInfo = document.getElementsByClassName('miniInfo');
    var showInfo = document.getElementsByClassName('moreInfo');

    console.log(clickInfo.length);
}

// Call activateFeedMain() once newsContent has finished
newsContent(activateFeedMain);

And where you define newsContent , design it to take a callback like so: 在定义newsContent ，将其设计为采用如下所示的回调：

function newsContent(callback){

    ...

    // When this function is done
    if(typeof callback === 'function'){
        callback();
    }
}

数组.length属性为JavaScript中的document.getElementsByClassName返回0

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-04 02:24:53

数组.length属性为JavaScript中的document.getElementsByClassName返回0

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-04 02:24:53

解决方案1
1 已采纳 2016-01-04 02:24:53