通过基于名称属性而不是id的jQuery循环元素

我有一个未知数量的（动态插入）输入元素在窗体中，我想附加jQuery UI中包含的日期选择器小部件。

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

按说我可能只是这样做：

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

然而，在我的工作的代码，输入元素不具有唯一的ID，直到表单数据保存（东西我无法更改），尽管它们具有格式为name="field_id_x[y][z]"的唯一名称属性值，当保存表格时，它将转换为id="field_id_xyz"格式的ID。

所以我的问题是，任何人都可以告诉我如何通过基于名称属性值的“日期选择”类来循环所有输入元素？

（PS这也可能是值得一提的是，在形式匹配输入元素的数量可以增加/在运行用户下降。）

来源

2009-08-25 Tom Davies

我不明白你的问题。你在那里编写的jQuery是完全有效的：它将通过一个'.date-pick'类来遍历所有输入元素并附加一个datepicker控件。为什么名字必须涉及？ – VoteyDisciple 2009-08-25 10:19:04

Votey，看到我对T.J.的评论。 Crowder的回答低于 – 2009-08-25 10:40:57

@meta：...并查看我的回复。 :-) – 2009-08-25 11:26:29

日期选择器不需要的元素有一个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>

来源

2009-08-25 10:28:18

感谢您的回答。我确实尝试过这种方法，问题是无论datepicker触发哪个字段，日期值都会进入jQuery找到的第一个匹配输入元素。例如在你的答案中使用代码，如果我点击第三个输入，datepicker被触发，但是当选择一个日期时，它被插入html中的第一个输入元素，而不是第三个输入元素... – 2009-08-25 10:37:10

@meta：这就是奇怪的是，它并不适合我，当我运行该测试页时，日期会进入正确的字段。我已经尝试过IE7，FF3.0（尚未升级），Safari 3（erm，同上），Opera 9.64和Chrome 2.我认为它一定是你网页上的其他东西造成这种行为...... – 2009-08-25 11:04:58

。 ..和FF 3.5.2和Safari 4.0.3（仅为了完整性）。 – 2009-08-25 11:16:35

您的代码应工作，因为它是。但是，您可以遍历的名字是这样的：

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

来源

2009-08-25 10:36:40

为你的答案欢呼 - 我应该提到，虽然我有其他的输入元素在同一个表单中，名称属性以'field_id_'开头，所以需要根据名称和类来循环。 – 2009-08-25 10:39:52

我将该类添加到选择器。 – 2009-08-25 10:52:35

感谢kaiz.net，但只有当第一个（按html顺序）输入元素被点击而不是随后的代码时，该代码似乎只会触发...我将尝试一个没有动态插入输入的更简洁的测试用例，并看到如果它的效果是 – 2009-08-25 11:02:06

你尝试过类似

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

来源

2012-01-31 12:10:05 user511941

通过基于名称属性而不是id的jQuery循环元素

回答

相关问题