Порядок сортировки случайно сгенерированных чисел с Javascript - PullRequest
Новая
       16

Порядок сортировки случайно сгенерированных чисел с Javascript

2 голосов
/ 11 мая 2019

Я только что добавил функцию Javascript в свой HTML, чтобы генерировать случайные числа от 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>

Ответы [ 2 ]

1 голос
/ 11 мая 2019

Вы можете сначала создать массив случайных чисел, а затем sort.Затем прокрутите их и добавьте в DOM, как вы сейчас делаете 

// 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);
}
0 голосов
/ 12 мая 2019

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>
...