用Javascript计算列表项的长度

Question

我已经设置了一个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？

Answer 1

我想你要找的是orderedList.children.length