javascript - 使用 Javascript 计算列表项的长度
问题描述
我已经设置了一个 Javascript 函数,它为我的每个搜索结果生成随机数,这些搜索结果是列表项,我想计算列表的长度,而不事先知道将显示的搜索结果的数量,因为每个查询都是不同的。
有没有办法做到这一点?
目前,我itemLength
在这个 Javascript 函数中手动添加了一个数字,因为我知道特定查询的结果数:
<script type="text/javascript">
var orderedList = document.getElementById("my_list");
var itemLength = 8; //REPLACE THIS WITH THE LENGTH OF THE ITEM LIST
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// get a default 100 into the array
var arrayOfNumbers = [100],
listItem = document.getElementById("list_item");
// get itemLength random numbers
for (let i = 0; i < itemLength; i++) {
arrayOfNumbers.push(getRandomInt(30, 98))
}
// sort the array of random numbers
arrayOfNumbers.sort(function(a, b) {
return b - a
})
// now do the lopping and creating elements
for (let i = 0; i < arrayOfNumbers.length; i++) {
let randomIntContainer = document.createElement('div');
randomIntContainer.textContent = arrayOfNumbers[i] + "%";
randomIntContainer.setAttribute('class', 'number');
listItem = document.getElementById("list_item");
listItem.appendChild(randomIntContainer);
orderedList.appendChild(listItem);
}
</script>
但是知道每个查询并不总是返回 8 个结果,并且我必须从 html 中的后端调用结果,如下所示:
<div>
{% if page_obj.object_list %}
<ol class="row top20" id="my_list">
{% for result in page_obj.object_list %}
<li id="list_item">
<div class="showcase col-sm-6 col-md-4">
<a href="{{ result.object.get_absolute_url }}">
<h3>{{result.object.title}}</h3>
<h5>{{ result.object.destination }}</h5>
<img src="{{ result.object.image }}" class="img-responsive">
</a>
</div>
</li>
{% endfor %}
</ol>
</div>
{% endif %}
我怎样才能自动计算itemLength
?
解决方案
我想你要找的是
orderedList.children.length
推荐阅读
- jenkins - 如果在该阶段后期确定输入无效,如何重试 groovy 管道中的输入步骤?
- linux - 如何在 Vim 中进行搜索和替换?
- r - 在两个公共列 R 的匹配值上连接两个数据帧
- c# - 从 appsettings.json 读取 List<(string,string[])>
- google-cloud-platform - 撤销 1 个令牌会撤销相同 OAuth 客户端 ID + 用户同意对的所有令牌
- javascript - mapbox gl js,用线连接点
- python - cx_oracle 禁用来自控制台的语句回显
- javascript - 在 react native (js) 中为 python cli 编写 ui
- .net - 如何为 Blazor Web Assembly 实现缓存清除
- c++ - 使用共享指针来自另一个线程的纯虚拟调用