如何在 javascript 中匹配 id 以在 html 上动态添加字段？答案

【问题标题】：How to match id in javascript for dynamically added field on html?如何在 javascript 中匹配 id 以在 html 上动态添加字段？
【发布时间】：2014-10-17 16:42:12
【问题描述】：

在我们的 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 匹配。更多细节将不胜感激。

【问题讨论】：

你知道id值吗？如果没有，您是否只是在寻找与此模式匹配的任何 id（尽管可能有多个）？或者，是否有一些方法可以识别与您想要的此方案匹配的特定 id？你没有给我们足够的信息来说明你想要做什么9。到目前为止，答案都是对您真正想做的事情的疯狂猜测，或者只是为您提供可以使用的工具。
ID 字符串中的 13 位数字在生成之前是未知的。这 13 位数字在同时生成时会在其他字段的 id 中重复。
你没有回答我的其他问题。您是否只是在整个文档中查找 ID 中具有该字符模式的任何 ID？而且，如果有多个与该模式匹配，你会怎么做？
我们正在寻找配对单价和数量的 id。每当任何单价或数量发生变化时，都会启动一个 JavaScript 函数来重新计算总数。

标签： javascript jquery html ruby-on-rails

【解决方案1】：

您必须首先决定使用什么算法来匹配 id 值。根据您的 cmets（在您的问题中没有明确指定），您似乎希望找到所有以 "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 列出所有具有以"order_supplier_id_" 开头的 id 的对象。然后，它会过滤该列表，消除与定义您的模式的完整正则表达式 /^order_supplier_id_\d+_unit_price$/ 不匹配的任何对象，然后仅将 .change() 事件处理程序连接到通过正则表达式测试的对象。

【讨论】：

它看起来可以工作了。我们如何遍历生成的列表中的每个 id？
@user938363 - 我不明白你所说的iterate through each of ids in the list generated 是什么意思。上面的 jQuery 对象中有一个 DOM 对象列表，可以使用 .each() 进行迭代。如果要提取 ID 的数字部分，可以在正则表达式中添加一个组，并匹配 id 上的正则表达式以获取数字 ID。
我们需要通过对每对进行 unit_price * qty 并将所有小计相加来计算小计。像这样进行小计：$('#order_order_items_xxxxxxxx_unit_price').val() * $('#order_order_items_xxxxxxxx_qty').val()。如果我们可以生成 2 个 id 列表，一个用于 unit_price，另一个用于 qty，那么我们可以通过检索它们的 val 来执行此乘法。
@user938363 - 你正在为这个问题做另一部分。既然已经回答了这个问题，并且您有了最初询问的对象列表，我建议您再问一个问题，了解如何获取此对象列表并使用它进行一些计算。在这个新问题中，请非常清楚价格和数量在您的 HTML 中来自哪里，因为这在您当前的问题中并不明显。
刚刚添加了一个新问题。不确定问题是否足够清楚。非常感谢。

【解决方案2】：

你试过了吗

$("input").prop("id");

这将搜索您的输入字段并找到 id 属性。

【讨论】：

你没看懂问题
他试图从输入字段中找到随机生成的id。对吗？

【解决方案3】：

使用<label> 的for 属性：

var selector = $('.decimal.required.control-label').eq(0).attr('for'),
    element = $('#'+selector);

console.log(element);
// [<input id="order_order_items_attributes_1413563163040_unit_price" ... >]

【讨论】：

【解决方案4】：

您可以使用属性选择器来匹配“包含”指定值的 id，使用 [attr*=value]。喜欢：

$("[id*='order_supplier_id']").change(function() {

});

MDN's docs on attribute selectors 指定可以用来匹配属性的选择器种类，其中：

[attr*=值]
表示属性名称为 attr 且其值包含至少一次出现的字符串“value”作为子字符串的元素。

【讨论】：

动态插入的所有元素的id以'order_order_items_'开头。如果我们这样做 $("[id*='order_order_items_']")，那么它将匹配每个动态元素。
然后寻找它是如何结束的，而不是它是如何开始的。
$("[*id='unit_price']") 会匹配任何以 '_unit_price' 结尾的 id 吗？有没有一种方法可以匹配以 'order_order_items' 和 '_unit_prie' 开头和结尾的 id？
@user938363 - [attr^=value] 表示以开头，[attr$=value] 表示以结尾 - 所以，在这种情况下将是 $("[id^='order_order_items'][id$='_unit_prie']")

【解决方案5】：

您可以维护一个元素 ID 数组，该数组在每次添加表单元素时都会更新。然后在数组中的元素上调用您的更改方法。但是，如果所有新元素的更改事件回调都相同，则没有必要这样做。只需在课堂上调用即可。

【讨论】：