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>

Answer 2

您可以使用括号表示法和字符串在查找时将数字连接到属性名称（请参阅下面的总体更好方法）：

for (var n = 1; n <= 17; ++n) {
    document.getElementById("menu" + n).value = note["menu" + n] + " - Rp." + note["harga" + n];
}

你已经说过“想象那里有1000个数据”，所以如果它是一个可变数量的字段，你可以像这样查询它们：

$("[id^=menu]");

...然后循环遍历结果，使用starts with选择器隔离ID末尾的数字：

$("[id^=menu]").each(function() {
    var n = +/\d+$/.exec(this.id);
    this.value = note["menu" + n] + " - Rp." + note["harga" + n];
});

我会退后一步，让note.menu和note.harga 数组，而不是note对象中的单独条目，而是使用类而不是输入上的id值，如下所示：

var note = {
  menu: ["one", "two", "three"],
  harga: [100, 200, 300]
};
$(".menu-input").each(function(i) {
  this.value = note.menu[i] + " - Rp." + note.harga[i];
});

<input class="menu-input" name="menu1" type="text" readonly>
<input class="menu-input" name="menu1" type="text" readonly>
<input class="menu-input" name="menu1" type="text" readonly>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者更好的是，让note成为一个对象数组：

var note = [
  {menu: "one", harga: 100},
  {menu: "two", harga: 200},
  {menu: "three", harga: 300}
];
$(".menu-input").each(function(i) {
  var entry = note[i];
  this.value = entry.menu + " - Rp." + entry.harga;
});

<input class="menu-input" name="menu1" type="text" readonly>
<input class="menu-input" name="menu1" type="text" readonly>
<input class="menu-input" name="menu1" type="text" readonly>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您可以使用startsWith选择器获取所有元素并更新其值。

此外，由于您知道要查找哪些元素input，因此您也可以将其添加到选择器中。

$("input[id^='menu']").each(function(i, el) {
  var index = i + 1;
  el.value = note["menu" + index] + " - Rp." + note[("harga" + index)]
})
$("input[id^='harga']").each(function(i, el) {
  el.value = note["harga" + (i + 1)]
})

您可以在以下JSFiddle

上测试完整演示

Answer 4

创建一个函数来生成1000个控件并获取值。你有标记jquery所以我使用jquery：

var createControls = function(note) {
 for (i=1; i <= 1000; i++) {
 var $control = $('<input type="text" id="menu' + i + '" />');
 var value = note['menu' + i] + " - Rp." + note['harga' + i];
 $control.val(value);

 // here is the code to append the generated control to the DOM.
 // you can use index 'i' to select the appropriate container
 // or you can dynamically generate all containers and everything else by this loop
  var $container = $('something'); // this is for example
  $control.appendTo($container);
 }
}

需要使用jquery循环来获取大量数据

4 个答案: