Question

所以我想做的就是使用循环将此代码中的value属性从我的DOM设置为0.

<input type="hidden" name="Pn_87001_qty" id="Pn_87001_qty" value="1" /> 
<input type="hidden" name="Pn_87001_qty" id="Pn_87002_qty" value="1" /> 
<input type="hidden" name="Pn_87001_qty" id="Pn_87003_qty" value="1" /> 
<input type="hidden" name="Pn_87001_qty" id="Pn_87004_qty" value="1" />

我有这个函数创建一个包含所有id的数组。

function testing02() {
    var eles = [];
    var inputs = document.querySelectorAll('[id^="Pn_"]');
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].name.indexOf('#Pn_') == 0) {
            eles.push(inputs[i]);
        }
    }
    console.log(inputs.length); 
}

我可以使用以下代码更改单个值属性的值：

test01 = document.getElementById('Pn_87001_qty');
test01.setAttribute("value", "1000");

话虽这么说，我无法找到一种方法来创建一个循环，根据输入数组中的ID设置value属性。我也无法找到一种方法使上面的循环用整个输入元素填充输入数组，以便我可以编写第二个循环来更改值。我尝试过使用.getElementsByName，.getElementsByClass以及document.querySelector。

我遇到了javascript的新手。任何帮助将不胜感激。我可以做Jquery或Javascript

Answer 1

正如你用jQuery标记了这个问题，我假设一个jQuery答案就足够了。为此，您不需要循环，只需使用：

$('[id^="Pn_"]').val(0);

Example fiddle

您可以通过为隐藏元素提供公共类属性并更改选择器以使用它来进一步优化它。

Answer 2

从您的名字中删除#前缀。

var inputs = document.querySelectorAll('[id^="Pn_"]');
for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].name.indexOf('Pn_') == 0) {
        inputs[i].value = 0;
    }
}

Demo

Answer 3

要将NodeList转换为数组，您可以使用：

for循环

var inputs = document.querySelectorAll('[id^="Pn_"]'),
    eles = Array(inputs.length);
for (var i = 0; i < inputs.length; ++i) {
    eles[i] = inputs[i];
}

Array.prototype.slice

var eles = [].slice.call(document.querySelectorAll('[id^="Pn_"]'));

Array.from（EcmaScript 6，polyfill）

var eles = Array.from(document.querySelectorAll('[id^="Pn_"]'));

要将所有值设置为'0'，您可以使用：

for循环

// Note you don't have to convert `inputs` to array
for (var i = 0; i < inputs.length; ++i) {
    inputs[i].value = '0';
}

Array.prototype.forEach（EcmaScript 5，polyfill）

// Note you must convert `inputs` to array
eles.forEach(function(el) {
    el.value = '0';
});

for...of循环（EcmaScript 6）

// Note you don't have to convert `inputs` to array
for(var el of inputs) {
    el.value = 0;
}

使用循环更改DOM <input />值

3 个答案: