如何使用Javascript为有序列表中的每个项目分配一个值答案

【问题标题】：How to assign a value to each item inside an ordered list with Javascript如何使用Javascript为有序列表中的每个项目分配一个值
【发布时间】：2019-09-23 15:01:18
【问题描述】：

我正在尝试为我的每个搜索结果提供一个百分比匹配分数，例如 90% Match。

我还没有找到任何在 python 中编写函数的解决方案，所以我想知道是否有一种方法可以创建一些 Javascript 代码，它会自动分配一个从 100 到 50% 的随机值（以相反的顺序）根据列表的默认顺序 (1,2,3,4..) 到有序列表中的每个项目（这是我的搜索结果）。

html 的简单示例：

<ol class="ordered-list">

   <li class="list-item"><\li>  <!-- This item represent the 1st result -->
   <li class="list-item"><\li>  <!-- 2nd result -->
   <li class="list-item"><\li>  <!-- 3rd result -->
   <li class="list-item"><\li>  <!-- 4th result -->

   <!-- Etc... -->

<\ol>

现在最终的预期结果应该是这样的：


- Title 1
  Description...
  *100% Match*

- Title 2
  Description...
  *92% Match*

- Title 3
  Description...
  *85% Match*

- Title 4
  Description...
  *56% Match*

PS;搜索结果并非都是手动添加的，它们都来自一个数据库和一个索引。

关于如何实现这一点的任何想法？

【问题讨论】：

您在使用其中任何一种吗？ jQuery/反应
我没有使用 React，但如果 Jquery 可以做到这一点，我绝对愿意使用它！

标签： javascript python html list frontend

【解决方案1】：

可以使用python的随机库来实现分数的随机生成。

import random

results_size = 4
scores = random.sample(range(50, 101), results_size)
scores.sort(reverse=True)
print(scores)

样本输出：

[93, 73, 68, 50]

然后迭代scores列表并将其当前值赋给当前列表元素。

【讨论】：

非常感谢，唯一的问题是我不知道确切的结果数量，因为每个查询都不同。我可以在没有results_size 实例的情况下执行此操作吗？
请问你是用什么来得到结果的？
当然，我使用 Elasticsearch 进行索引和 Postgresql 数据库！
我认为你可以使用 len(search_results) 方法来获取结果的数量。
我们可以私下继续对话吗？我有一些信息和台词可以更轻松地与您分享。

【解决方案2】：

这部分用于生成一个75-100范围内的随机数：

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

这部分是您可以使用的代码示例，您可以通过更改itemLength 来生成与您从数据库中获取的行数一样多的<li> 项目，并且您可以更改通过将listItem.appendChild(randomInt) 中的randomInt 替换为您要放入其中的描述来列出项目。

<body>
    <ol id="listObject">

    </ol>
</body>

<script type="text/javascript">
    var orderedList = document.getElementById("listObject");
    var itemLength = 5; //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;
    }

    var listItem; var randomInt;

    for (var i = 0; i < itemLength; i++){

        listItem = document.createElement("LI");
        randomInt = document.createTextNode(getRandomInt(50, 100).toString() + "%");
        listItem.appendChild(randomInt);
        orderedList.appendChild(listItem);
    }

</script>

【讨论】：

感谢您的回复，我已经有一个列表项，结果数量来自搜索查询。这是我的搜索结果的 html：
`
{% if page_obj.object_list %}
{% for result in page_obj.object_list %}

{{result.object.title}}

{{ result.object.destination }}

{% endfor %}
`
有没有办法更改代码，使其适用于此？
那些代码是用来生成<li>的吗？那么也许您可以使用javascript编辑显示百分比的标签内容。
是的，基本上如果没有找到给定查询的结果，列表项将不会显示。您能否提供一个可以通过编辑标签内容来工作的代码示例？

{{result.object.title}}

{{ result.object.destination }}