jQuery：通过仅匹配其名称的一部分来选择 id [重复]答案

【问题标题】：jQuery: select id by matching only part of its name [duplicate]jQuery：通过仅匹配其名称的一部分来选择 id [重复]
【发布时间】：2020-05-13 16:59:13
【问题描述】：

在我的代码中，我有大量具有以下模式的输入：

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

等

它们之间的唯一区别是中间的数字代表它们在行中的位置。是否有可能以某种方式匹配所有这些并使用 jQuery 选择它们的值？

【问题讨论】：

stackoverflow.com/questions/33615334/… 同样的事情，只是使用id 而不是class
否则，在他们身上放一个类
你想要数组中的值吗？还是值的总和？请详细说明
为 ID 选择这种类型的标签是一个非常糟糕的选择

标签： javascript html jquery

【解决方案1】：

正确的做法是：

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

然后您可以像这样检索元素：

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

或者像这样获取订单数量：

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

以下是有关使用自定义属性的更多信息： https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

【讨论】：

相当确定类中的# 与条目所针对的产品有关，而不是数量。输入的值将是实际数量。所以你的数据字段有点误导。如果是data-product="0" 会更有意义
“正确的方式” - bzzt。认为您的意思是“一种可能的方法”。还是加个类更好。或者从父元素$("#divwrapper>input")中引用它们
当然，有很多方法可以做到这一点。这种方式比大多数其他解决方案更正确。它是面向未来、可维护且快速的。

【解决方案2】：

救援的属性选择器：

属性以选择器 [name^=”value”] 开头
属性以选择器 [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">

添加一个类会更好，但是这个选择器会起作用。

【讨论】：

【解决方案3】：

您可以尝试使用Attribute Starts With Selector [name^="value"]。

演示：

$('[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">

【讨论】：