[英]How to insert a percentage at specific positions in Javascript
I'm trying to change the place of a <div>
created by some Javascript code using insertbefore()
but I don't understand how to apply it in my code. 我正在尝试使用
insertbefore()
更改由某些Javascript代码创建的<div>
的位置,但是我不知道如何在我的代码中应用它。
My Javascript generate random numbers and create a <div>
where these numbers are being inserted as childs of it: 我的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>
The problem is that the <div>
with the numbers are being displayed at the end of my <li>
element as you can see below: 问题是带有数字的
<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 %}
But I want this <div>
and the numbers to be displayed above the <a>
tag in a specific <div>
with an Id of matching_score
like this: 但是我希望此
<div>
和数字显示在特定<div>
的<a>
标记上方,且具有matching_score
的ID,如下所示:
<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 %}
How can I do this? 我怎样才能做到这一点?
Instead of doing 而不是做
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))}
}
you need to do 你需要做
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);
}
Example to prove it's working: 证明其有效的示例:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.