我的 HTML 中有一个包含一个类的 li 元素列表。我想把它们都抓起来放在一个数组中，然后找出我抓了多少。但是，每当我尝试输出 document.getElementsByClassName 所在数组的 .length 属性时，它只会导致 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(); 安装ul 中的所有li。附带说明一下，当我使用 console.log(clickInfo) 时，它会给我数组列表。与 .length 属性有关...
此外，当我尝试使用 console.log(clickInfo[1]); 时，它给我未定义的...
最佳答案
您遇到此问题的原因是因为您的 newsContent 函数正在动态创建页面上的内容异步，与您的 activateFeedMain 并行 功能。由于它们是同时调用的，因此在调用 activateFeedMain 时尚未创建 newsContent 函数中的元素。
您可以通过为 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();
}
}
关于javascript - 数组 .length 属性为 JavaScript 中的 document.getElementsByClassName 返回 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34583867/