Подсчитайте и определите количество входов с указанным префиксом c ID

Question

У меня есть таблица с 33 входами с идентификаторами в диапазоне от 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"/>

ИЛИ: Использование 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

Мотивация, по которой я бы предпочел использовать поле data, заключается в том, что я считаю id уникальным идентификатором, связанным с элементом DOM.

В вашем примере предлагается не цена как уникальный идентификатор, а обходной путь, позволяющий сканировать DOM для элемента цены.
Даже если это касается уникального идентификатора, скажем, идентификатор в качестве первичного ключа из базы данных я бы использовал что-то вроде data-id, поскольку это более информативно упоминает, что мы говорим о реальных данных , а не об идентификаторе элемента DOM, который может быть или не быть просто обобщенным c описание, которое просто фокусируется на уникальности.

Из-за этого имеет смысл иметь универсальный атрибут c для определения цены (это все, что вы хотите, чтобы он был семантически), и вы можете выделить поле пользовательских данных, которое вы хотите получить позже. в вашем javascript коде.

Без фантазии:

<div>
    <div data-type="price" data-price='5'>5<span>$</span></div>
    <div data-type="price" data-price='6'>6<span>$</span></div>
</div>

var prices = document.querySelectorAll("[data-type='price']");

for (let i = 0; i < prices.length; i++) {
    console.log('price:', prices[i].getAttribute('data-price'));
}

https://jsfiddle.net/b03c7ars/

Answer 4

попробуйте это:

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