Question

我有一个li元素列表，其中包含一个HTML格式的类。我想抓住它们并将它们放在一个数组中，然后找出我抓了多少。但是，每当我尝试输出.length所在的数组的document.getElementsByClassName属性时，它就会产生0。这是我的代码：

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

        console.log(clickInfo.length);
    }

    activateFeedMain();

这是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>

脚本newsContent();会安装li中的所有ul。另外，当我使用console.log(clickInfo)时，它会给我一个数组列表。有些事情与.length属性...

有关

另外，当我尝试使用console.log(clickInfo[1]);时，它给了我未定义的......

Answer 1

<强> Working fiddle

您遇到此问题的原因是您的newsContent功能正在动态创建在页面异步上创建内容，与您的activateFeedMain功能并行。由于它们是在同一时间被调用的，因此newsContent函数中的元素在调用activateFeedMain时尚未创建。

您可以通过为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);

在您定义newsContent的地方，将其设计为采取类似的回调：

function newsContent(callback){

    ...

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

Array .length属性在JavaScript中为document.getElementsByClassName返回0

1 个答案: