Question

我刚刚在html中添加了Javascript函数，以为每个列表项生成30到100之间的随机数，并且我试图弄清楚如何对这些数字进行反向排序，并确保第一项始终具有值为100。

要添加上下文，我的目标是为搜索结果提供匹配分数百分比。例如：90% Match。

例如，预期结果将是这样：

List of item (in reverse order with 100 as default first value):

1. 100%

2. 92%

3. 86%

4. 80%

5. 71%

6. 65%

7. 58%

8. 45%

9. 30%

目前看起来像这样：

List of item (random order):

1. 58%

2. 66%

3. 97%

4. 58%

5. 89%

6. 61%

7. 63%

8. 86%

9. 46%

当前显示数字的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 %}

如何对顺序进行反向排序，并为第一个结果赋予默认值100？

我的脚本

var orderedList = document.getElementById("my_list");
var itemLength = 9; //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.getElementById("list_item");
  randomInt = document.createTextNode(getRandomInt(30, 100).toString() + "%");
  listItem.appendChild(randomInt);
  orderedList.appendChild(listItem);
}

<ul id="my_list">
  <li id="list_item"></li>
</ul>

Answer 1

您可以先创建一个随机数数组，然后sort个数组。然后，遍历它们并将它们添加到您当前正在执行的操作中

// 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, 100))
}

// 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 randomInt = document.createTextNode(arrayOfNumbers[i] + "%");
  listItem.appendChild(randomInt);
  orderedList.appendChild(listItem);
}

Answer 2

ES6版本

const getRandomInt = ((min, max) => Math.floor(Math.random() * (max - min + 1)) + min);
const list = document.querySelectorAll('#my_list li');
[...Array(list.length - 1)
    .fill()
    .map(() => getRandomInt(30, 99)), 
    100]
  .sort((a, b) => b - a)
  .forEach((item, i) => {
    list[i].appendChild(document.createTextNode(item + '%'));
  })

<ol class="row top20" id="my_list">
  <li class="list_item">
    <div class="showcase col-sm-6 col-md-4">
      <a href="#">
        <h3>Title 1</h3>
        <h5>Destination 1</h5>
        <img src="..." class="img-responsive">
      </a>
    </div>
  </li>
  <li class="list_item">
    <div class="showcase col-sm-6 col-md-4">
      <a href="#">
        <h3>Title 2</h3>
        <h5>Destination 2</h5>
        <img src="..." class="img-responsive">
      </a>
    </div>
  </li>
  <li class="list_item">
    <div class="showcase col-sm-6 col-md-4">
      <a href="#">
        <h3>Title 3</h3>
        <h5>Destination 3</h5>
        <img src="..." class="img-responsive">
      </a>
    </div>
  </li>
</ol>

使用Javascript随机生成的数字的排序顺序

2 个答案: