CODEWITHSUNDEEP
javascriptjqueryhtml
tony
tony

Reputation: 614

Count and define number of inputs with specific ID prefix

I have a table with 33 inputs with ID's ranging from 1 - 33. So for example they range from "price-1" all the way to "price-33"

Instead of individually define these elements one by one like this:

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

How can I automatically count (perhaps count by the price- prefix?) and define each of these elements using JavaScript (or jQuery if it's easier)?

Upvotes: 4

Views: 1153

Answers (4)

Mamun
Mamun

Reputation: 68943

You can try using Attribute selectors ( starts with:- [attr^=value]):

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

Demo: Using vanilla 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: Using 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"/>

Upvotes: 8

Trace
Trace

Reputation: 18869

The motivation why I would prefer to use a data field is because I consider id to be a unique identifier related to the DOM element.

Your example doesn't suggest price being a unique identifier, but rather a workaround to allow crawling the DOM for price element.
Even when it would concern a unique identifier, let's say an id as primary key from a database, I would use something like data-id, as this more descriptively mentions that we are talking about the actual data rather than a DOM element's id that may or may not be just a generic description that merely focuses on uniqueness.

Because of this, it makes more sense to have a generic attribute to identify the price (this anything you want it to be semantically), and you can allocate custom data field that you want to retrieve later in your javascript code.

Without being fancy: 

<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/

Upvotes: 1

Jaber Alshami
Jaber Alshami

Reputation: 404

try this:

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

Upvotes: 1

palaѕн
palaѕн

Reputation: 73916

You can use querySelectorAll for this purpose:

// 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"/>

Upvotes: 3

Related Questions