javascript - 计算并定义具有特定 ID 前缀的输入数量

Question

我有一个包含 33 个输入的表，ID 范围为 1 - 33。例如，它们的范围从“price-1”一直到“price-33”

不要像这样一一单独定义这些元素:

var p1 = document.getElementById("price-1");
var p2 = document.getElementById("price-2");

如何自动计数(也许按 price- 前缀计数？)并使用 JavaScript(或 jQuery，如果更简单的话)定义每个元素？

Answer 1

您可以尝试使用Attribute selectors (以:- [attr^=value] 开头):

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

演示:使用普通 JS:

var elList = document.querySelectorAll('[id^=price-]');
console.log(elList.length); //5

//loop throgh all the elements whose id starts with price-
var data = {};
elList.forEach(function(el){
  data[el.id] = el.value;
});
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="price-1" value="100"/>
<input id="price-2" value="200"/>
<input id="price-3" value="300"/>
<input id="price-4" value="400"/>
<input id="price-5" value="500"/>

或:使用 jQuery

var count = $('[id^=price-]').length;
console.log(count); //5

//loop throgh all the elements whose id starts with price-
var data = {};
$('[id^=price-]').each(function(){
  data[this.id] = this.value;
});
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="price-1" value="100"/>
<input id="price-2" value="200"/>
<input id="price-3" value="300"/>
<input id="price-4" value="400"/>
<input id="price-5" value="500"/>