javascript - 需要使用 jquery 来处理大量数据的简短循环方式

Question

我需要找到一种使用循环的方法:

document.getElementById("menu1").value = note.menu1 + " - Rp." + note.harga1;
document.getElementById("menu2").value = note.menu2 + " - Rp." + note.harga2;
document.getElementById("menu3").value = note.menu3 + " - Rp." + note.harga3;
document.getElementById("menu4").value = note.menu4 + " - Rp." + note.harga4;
document.getElementById("menu5").value = note.menu5 + " - Rp." + note.harga5;
document.getElementById("menu6").value = note.menu6 + " - Rp." + note.harga6;
document.getElementById("menu7").value = note.menu7 + " - Rp." + note.harga7;
document.getElementById("menu8").value = note.menu8 + " - Rp." + note.harga8;
document.getElementById("menu9").value = note.menu9 + " - Rp." + note.harga9;
document.getElementById("menu10").value = note.menu10 + " - Rp." + note.harga10;
document.getElementById("menu11").value = note.menu11 + " - Rp." + note.harga11;
document.getElementById("menu12").value = note.menu12 + " - Rp." + note.harga12;
document.getElementById("menu13").value = note.menu13 + " - Rp." + note.harga13;
document.getElementById("menu14").value = note.menu14 + " - Rp." + note.harga14;
document.getElementById("menu15").value = note.menu15 + " - Rp." + note.harga15;
document.getElementById("menu16").value = note.menu16 + " - Rp." + note.harga16;
document.getElementById("menu17").value = note.menu17 + " - Rp." + note.harga17;

Fiddle

因为我需要为每个输入文本提供一个值。

想象一下如果有1000条数据会怎样？我应该输入直到 <input type="text" id="menu1000"> ？

Answer 1

你可以使用

document.querySelectorAll('[id^="menu"]');

var elements = document.querySelectorAll('[id^="menu"]');

for(var i = 0; i < elements.length ; i++) {
    console.log(
        'i = ', i,
        ', id number = ', elements[i].id.match(/\d+/)[0],
        ', element = ', elements[i]
    );
}

<input id="menu1" name="menu1" type="text" readonly>
<input id="menu2" name="menu2" type="text" readonly>
<input id="menu3" name="menu3" type="text" readonly>
<input id="menu4" name="menu4" type="text" readonly>