遍历最后 5 个数据列表项 GET value & 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);
            }`

我想将上述 'IND' 中的值按顺序添加到 (a href) div id numbers "div111" etc. 和来自的标签在 '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++
}

我只是添加了一个计数器并针对 template literal.

中您想要更改的确切元素

遍历最后 5 个数据列表项 GET value & html

loop through last 5 datalist items GET value & html

javascript

jquery

loops

datalist