基于 name 属性而不是 id 使用 jQuery 循环遍历元素答案

【问题标题】：looping through elements with jQuery based on name attribute rather than id基于 name 属性而不是 id 使用 jQuery 循环遍历元素
【发布时间】：2009-08-25 10:14:48
【问题描述】：

感谢您花时间阅读本文。

我在表单中有未知数量的（动态插入的）输入元素，我想将 jQuery UI 中包含的 datepicker 小部件附加到每个输入元素。

我想附加日期选择器以具有“日期选择”类的所有输入元素。显然，因为我们有多个匹配元素，所以我们需要的不仅仅是一个类名，以便将日期值返回到原始字段，而不仅仅是第一个匹配项。

通常我可能会这样做：

$("input.date-pick").each(function(){
    $(this).datepicker({dateFormat: "yy-mm-dd"});
});

但是在我正在使用的代码中，输入元素在保存表单数据之前没有唯一的 ID（我无法更改），尽管它们确实具有唯一性name="field_id_x[y][z]" 格式的 name 属性值，当保存表单时，它会转换为 id="field_id_xyz" 格式的 id。

所以我的问题是，谁能告诉我如何根据名称属性值使用“日期选择”类遍历所有输入元素？

（PS 可能还值得一提的是，表单中匹配输入元素的数量可以由用户即时增加/减少。）

【问题讨论】：

我不听你的问题。您在那里编写的 jQuery 是完全有效的：它将遍历所有带有 .date-pick 类的输入元素并附加一个日期选择器控件。为什么这些名字必须参与？
投票，请参阅我对 T.J. 的评论。克劳德的回答如下
@meta: ...看看我的回复。 :-)

标签： javascript jquery loops attributes

【解决方案1】：

您的代码应该可以正常工作。但是，您可以像这样按名称循环：

$("input[name*='field_id_'].date-pick").each(function(){
   $(this).datepicker({dateFormat: "yy-mm-dd"});
});

【讨论】：

为您的回答干杯 - 我应该提到，虽然我有其他输入元素以相同的形式，名称属性以 field_id_ 开头，因此需要根据名称和类进行循环。跨度>
我将类添加到选择器中。
感谢 kaiz.net，但该代码似乎仅在单击第一个（按 html 顺序）输入元素而不是后续元素时触发...我将尝试更精简的测试用例没有动态插入的输入，然后看看它是否有效
@kaiz.net，您的解决方案在最小的测试用例中完美运行，但被我正在使用的代码插入的重复 id 值破坏了 - 不过感谢您的时间和关注！跨度>

【解决方案2】：

日期选择器不需要元素具有 ID。您已经在查找它的元素。这应该有效：

$('input.date-pick').datepicker({dateFormat: "yy-mm-dd"});

请注意，您甚至不需要 each 调用。

完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker Test Page</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type='text/javascript'>
$(function() {
    $('.dp').datepicker();
});
</script>
</head>
<body>
<hr />
<input class='dp' type='text'>
<input class='dp' type='text'>
<input class='dp' type='text'>
</body>
</html>

【讨论】：

感谢您的回答。我确实尝试过，问题是无论触发日期选择器的字段是什么，日期值都会输入到 jquery 找到的第一个匹配的输入元素中。 For example using the code in your answer, if I click the third input the datepicker is triggered but when a date is selected it is inserted into the first input element in the html rather than the third...
@meta：这很奇怪，它不适合我，当我运行该测试页面时，日期会显示在正确的字段中。我已经尝试过 IE7、FF3.0（尚未升级）、Safari 3（呃，同上）、Opera 9.64 和 Chrome 2。我认为这一定是您页面上的其他东西导致了这种行为......跨度>
...以及 FF 3.5.2 和 Safari 4.0.3（仅出于完整性考虑）。
嗯好的，谢谢 T.J. - 您完全正确，因为您的测试页按预期工作。认为我发现了一个问题，即动态插入的输入元素都具有相同的 id 值 - 导致我遇到的“第一个元素”行为。不幸的是，这不是我能够在我工作的环境中改变的事情。对不起，我以前没有见过。我想我要么与我正在连接的代码的开发人员一起讨论，要么尝试另一条路线。再次感谢您的宝贵时间
@meta：祝你好运。你肯定想解决这个问题，拥有多个具有相同 id 的元素是一件坏事。

【解决方案3】：

你有没有尝试过类似的东西

var namefield = "field_id_"
$("date-pick").each(function(index, element) {
  if ($(element).attr("name").substr(0,namefield.length) == namefield) {
    // code to process
  }
});

【讨论】：