遍历最后 5 个数据列表项 GET 值和 html答案

【问题标题】：loop through last 5 datalist items GET value & html遍历最后 5 个数据列表项 GET 值和 html
【发布时间】：2023-03-20 00:32:02
【问题描述】：

我想将最后 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 编号“div111”等上按顺序将上述“IND”中的值添加到（a href）以及“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>`

【问题讨论】：

请修正你的帖子，这很难理解。我知道这听起来很愚蠢，但请再试一遍。

标签： javascript jquery loops datalist

【解决方案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++
}

我只是在template literal 中添加一个计数器并定位您想要更改的确切元素。

【讨论】：

非常感谢