Question

感谢您花时间阅读本文。

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

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

通常我可能会做类似的事情：

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

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

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

（PS也可能值得一提的是，用户可以动态增加/减少表格中匹配的输入元素的数量。）

Answer 1

日期选择器不需要具有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>

Answer 2

您的代码应该按原样运行。但是，您可以按名称循环：

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

Answer 3

你试过像

这样的事吗？

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

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

3 个答案: