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

Question

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

我的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>和数字显示在 Id 为matching_score的特定<div>中<a>标签上方，如下所示：

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