循环遍历最后 5 个数据列表项 GET 值和 html

Question

我想将最后5个数据列表项添加到以下内容中。有人能给我一些指示吗。

我有这个代码抓取最后5个数据列表项目。

`var h = document.getElementById("reports").options.length;
var ind, len, product;
var len = (h - 5);
for ( ind = len; ind < h; ind++ ) {
//this is the value (a url)
//alert(document.getElementById("reports").options[ind].value); 
//this is the text between <option>text</option>
//alert(document.getElementById("reports").options[ind].label);
}`

我想按div id数字的顺序将上述'IND'的值添加到(a href(中"div111"；以及从上面的标签"ind"(标签之间的文本按跨度id号"div11"等的顺序(

` <div class="notification">
<img class="" style="color:red" class src="images/bellG.svg">
<ul class="notification-menu">
<li>
<img class="avatar" src="images/ic_note_add_black_36dp.png">
<p><span id="date1">New Report #01 </span></p>
<p><a id="div111"><span id="div11"></span></a></p>
</li>
<li>
<img class="avatar" src="images/ic_note_add_black_36dp.png">
<p><span id="date2">New Report #02 </span></p>
<p><a id="div112"><span id="div12"></span></a></p>
</li>
<li>
<img class="avatar" src="images/ic_note_add_black_36dp.png">
<p><span id="date3">New Report #03 </span></p>
<p><a id="div113"><span id="div13"></span></a></p>
</li>
<li>
<img class="avatar" src="images/ic_note_add_black_36dp.png">
<p><span id="date4">New Report #04 </span></p>
<p><a id="div114"><span id="div14"></span></a></p>
</li>
<li>
<img class="avatar" src="images/ic_note_add_black_36dp.png">
<p><span id="date5">New Report #05 </span></p>
<p><a id="div115"><span id="div15"></span></a></p>
</li>
</ul>
</div>`

Answer 1

我相信这就是你想要的：

var h = document.getElementById("reports").options.length;
var ind, len, product;
var len = (h - 5);
var outputElems = document.querySelector('.notification-menu')
var counter = 0
for ( ind = len; ind < h; ind++ ) {
outputElems.querySelector(`#div${111 + counter}`).href = document.getElementById("reports").options[ind].value
outputElems.querySelector(`#div${11 + counter}`).textContent = document.getElementById("reports").options[ind].label
counter++
}

我只是简单地添加了一个计数器，并针对您想要在模板文本中更改的确切元素。