jQuery: select id by matching only part of its name

Question

In my code I've got pleny of inputs with the following pattern:

<input type="text id="Order_Products_0_quantity" value="0">
<input type="text id="Order_Products_1_quantity" value="1">
<input type="text id="Order_Products_2_quantity" value="2">

etc

The only difference between them is the number in the middle which stands for their place in the row. Is it possible to somehow match all of them and select their values with jQuery?

https://stackoverflow.com/questions/33615334/jquery-finding-partial-class-name/33615377#33615377 Same thing, just using `id` instead of `class` — Taplar, May 13 '20 at 16:59
Do you want the values in an array? Or the sum of the values? Kindly elaborate — Abid Suleman Ahmed, May 13 '20 at 17:04

Mamun · Answer 1 · 2020-05-13T17:03:57.000

You can try using Attribute Starts With Selector [name^="value"].

Demo:

$('[id^=Order_Products_]').each(function(){
  console.log(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Order_Products_0_quantity" value="0">
<input type="text" id="Order_Products_1_quantity" value="1">
<input type="text" id="Order_Products_2_quantity" value="2">

Matt · Accepted Answer · 2020-05-13T17:12:09.847

2

The correct way to do this would be:

<input type="text" data-order-qty="0" class="Order_Products_quantity" value="0">
<input type="text" data-order-qty="1" class="Order_Products_quantity" value="1">
<input type="text" data-order-qty="2" class="Order_Products_quantity" value="2">

You can then retrieve the element like so:

$(".Order_Products_quantity[data-order-qty=2]");

Or fetch the order qty like so:

$(".Order_Products_quantity").eq(1).attr('data-order-qty');

Here's more info on using custom attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

edited May 13 '20 at 17:12

answered May 13 '20 at 17:10

Matt

158
1
10

2

Fairly certain the # in the class relates to which product the entry is for, not it's quantity. The value of the input would be the actual quantity. So your data field is slightly misleading. It would make more sense if it was `data-product="0"` – Taplar May 13 '20 at 17:12
*"The **correct** way"* - bzzt. Think you meant *"one possible way to do this"*. Still better to add a class. Or reference them from the parent element `$("#divwrapper>input")` – freedomn-m May 13 '20 at 17:14
Sure, there are many ways to do it. This way is just more correct than most of the other solutions. It's future proof, maintainable and quick. – Matt May 13 '20 at 17:18

score 1 · Answer 3 · answered May 13 '20 at 17:03

Attribute selectors to the rescue:

Attribute Starts With Selector [name^=”value”]
Attribute Ends With Selector [name$=”value”]

var inps = $('input[id^="Order_Products_"][id$="_quantity"]')
console.log(inps.map(function () { return +this.value }).get())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Order_Products_0_quantity" value="0">
<input type="text" id="Order_Products_1_quantity" value="1">
<input type="text" id="Order_Products_2_quantity" value="2">


<input type="text" id="Order_Products_0_foo" value="4">
<input type="text" id="Order_Products_1_foo" value="5">
<input type="text" id="Order_Products_2_foo" value="6">

It would be better to add a class, but this selector will work.

jQuery: select id by matching only part of its name

3 Answers3