计数和定义具有特定ID前缀的输入数

Question

我有一张有33个输入的桌子，ID在1-33之间。例如，从“价格-1”一直到“价格-33”。

而不是像这样一个接一个地定义这些元素：

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

我如何自动计数(也许是用price-前缀计数？)并使用JavaScript (如果更容易定义jQuery )来定义这些元素中的每一个？

Answer 1

您可以尝试使用属性选择器 (以：-[attr^=value]开头)：

表示属性名称为attr的元素，其值以值作为前缀(前面)。

演示:使用香草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"/>

​

OR:使用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"/>

​

Answer 2

为此，您可以使用querySelectorAll：

​

// Get all elements where id starts with `price` text
const prices = document.querySelectorAll('*[id^="price"]');

// Loop through each one of them
[...prices].forEach(price => {
  console.log('id: ', price.id);
  console.log('value: ', price.value);
});

<input type="text" id="price-1" value="10" />
<input type="text" id="price-2" value="20"/>

​

Answer 3

试试这个：

document.querySelectorAll('[id^="price-"]').forEach((el, i) => console.log(el, i))