javascript - 如何在 html 上动态添加字段的 javascript 中匹配 id？

Question

在我们的 Rails 应用程序中，可以将动态字段添加到表单中。以下是动态添加字段 order_order_items_attributes_1413563163040_unit_price 的 html 源代码:

<div class="input decimal required order_order_items_unit_price">
<label class="decimal required control-label" for="order_order_items_attributes_1413563163040_unit_price">
<abbr title="required">*</abbr>
Unit Price($)
</label>
<input id="order_order_items_attributes_1413563163040_unit_price" class="numeric decimal required span5 span5" type="number" step="any" name="order[order_items_attributes][1413563163040][unit_price]">
</div>

可以看到，字段的id中有13位数字的字符串，它是在添加字段时随机生成的。我们如何在 JavaScript 中匹配(定位)这种类型的随机 id？ Rails 应用使用 jquery(例如，$('#order_order_items_attributes_xxxxxxxxxxxxx_unit_price').change(function (){}))。

我们对这种 css 类型的 id 匹配很陌生。更详细的信息将不胜感激。

Answer 1

您必须首先决定使用什么算法来匹配 id 值。根据您的评论(您的问题中没有明确指定)，您似乎想要查找以 "order_order_items_attributes_" 开头并以 "_unit_price" 结尾的所有 id，并且它们之间有一个数字序列。

您可以通过查找所有以您想要的内容开头的 id，然后将它们过滤为仅匹配所有三个条件的内容来做到这一点:

// find ids that match this pattern: order_order_items_attributes_xxxxxxxxxxxxx_unit_price
var orderItemRegex = /^order_supplier_id_\d+_unit_price$/;
$("[id^='order_supplier_id_']").filter(function(index) {
    return orderItemRegex.test(this.id);
}).change(function() {
    // this will be only the ids that match
});

这使用 jQuery 来创建 ID 以“order_supplier_id_”开头的所有对象的列表。然后，它会过滤该列表，消除与定义模式的完整正则表达式 /^order_supplier_id_\d+_unit_price$/ 不匹配的任何对象，然后连接 .change() 仅针对通过正则表达式测试的对象的事件处理程序。