javascript - 如何在 Javascript 中的特定位置插入百分比

Question

我正在尝试更改 <div> 的位置由一些 Javascript 代码使用 insertbefore() 创建但我不明白如何在我的代码中应用它。

我的 Javascript 生成随机数并创建 <div>这些数字作为其子项插入:

<script type="text/javascript">

  var orderedList = document.getElementById("my_list");
  var itemLength = orderedList.children.length - 1; // CALCULATE 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.querySelector("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');
    for (const matchingOrder of orderedList.querySelectorAll('.matching_score')) { matchingOrder.appendChild(randomIntContainer.cloneNode(true))}
  }

</script>

问题是<div>数字显示在我的 <li> 的末尾元素如下所示:

<div>
   {% if  page_obj.object_list %}
       <ol class="row top20" id="my_list">

          {% for result in page_obj.object_list %}

          <li class="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>

          <!--  Numbers are displayed randomly here --> 90%

          </li>

           {% endfor %}

       </ol>
</div>
    {% endif %}

但我想要这个<div>以及 <a> 上方显示的数字特定 <div> 中的标签ID 为 matching_score像这样:

<div>
   {% if  page_obj.object_list %}
       <ol class="row top20" id="my_list">

          {% for result in page_obj.object_list %}

          <li class="list_item">
              <div class="showcase col-sm-6 col-md-4">

     <!--  Display the Js function in the written div below --> 

               <div class="matching_score">
                    <!-- Here -->
               </div>

               <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 %}

我该怎么做？

Answer 1

而不是做

for (let i = 0; i < arrayOfNumbers.length; i++) {
    let randomIntContainer = document.createElement('div');
    randomIntContainer.textContent = arrayOfNumbers[i] + "%";
    randomIntContainer.setAttribute('class', 'number');
    for (const matchingOrder of orderedList.querySelectorAll('.matching_score')) { matchingOrder.appendChild(randomIntContainer.cloneNode(true))}
}

你需要做

for (const [i, matchingOrder] of orderedList.querySelectorAll('.matching_score').entries()) {
    let randomIntContainer = document.createElement('div');
    randomIntContainer.textContent = arrayOfNumbers[i] + "%";
    randomIntContainer.className = 'number';
    matchingOrder.appendChild(randomIntContainer);
}

证明其有效的示例:

let arrayOfNumbers = [ 2,5,6,8 ];

for (const [i, matchingOrder] of orderedList.querySelectorAll('.matching_score').entries()) {
  let randomIntContainer = document.createElement('div');
  randomIntContainer.textContent = arrayOfNumbers[i] + "%";
  randomIntContainer.className = 'number';
  matchingOrder.appendChild(randomIntContainer);
}

<ol id="orderedList">
  <li>
    <div class="matching_score"></div>
    <p>Foo</p>
  </li>
  <li>
    <div class="matching_score"></div>
    <p>Bar</p>
  </li>
  <li>
    <div class="matching_score"></div>
    <p>Baz</p>
  </li>
  <li>
    <div class="matching_score"></div>
    <p>Foobar</p>
  </li>
</ol>