Javascript 必须在HTML中手动定义日期选择器的数量

因此，我的Grails应用程序中有一个工作表单，其中有4个

实例，但我必须手动将id定义为

...
<td><g:textField id="datepicker1" .../></td>
...
<td><g:textField id="datepicker2" .../></td>
...
<td><g:textField id="datepicker3" .../></td>
...
<td><g:textField id="datepicker4" .../></td>
...

。。。
...
...
...
...

HTML的头部（在我的GSP中）包含

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
  $(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
    $("#datepicker3").datepicker();
    $("#datepicker4").datepicker();
  });
</script>

$（函数（）{
$（“#datepicker1”）.datepicker（）；
$（“#datepicker2”）.datepicker（）；
$（“#datepicker3”）.datepicker（）；
$（“#datepicker4”）.datepicker（）；
});

是否有一种方法可以做到这一点，我不必预先定义页面上有多少个日期选择器，为每个日期选择器分配

日期选择器35;

，并且无论单击哪个日期文本框，它都会弹出日历

---

仅在头部执行一个日期选择器，并尝试对每个日期使用

，目前不起作用。

而不是通过ID添加一个类或数据属性来标识元素

<td><g:textField class="datepicker" .../></td>
<td><g:textField class="datepicker" .../></td>

或

然后

<script type="text/javascript">
    $(function() {
        $(".datepicker").datepicker(); //searchs all elements with class datepicker

        //or

        $("[data-datepicker]").datepicker(); //searchs for all elements with attribute data-datepicker
    });
</script>

$（函数（）{
$（“.datepicker”）.datepicker（）；//使用类datepicker搜索所有元素
//或
$（“[data datepicker]”。datepicker（）；//搜索具有属性data datepicker的所有元素
});

改为使用类，即在jquery

$（“.datepicker”）.datepicker（）中对每个对象使用类中提琴！非常感谢你！与charmI类似，更喜欢使用数据属性以避免CSS类冲突
<script type="text/javascript">
    $(function() {
        $(".datepicker").datepicker(); //searchs all elements with class datepicker

        //or

        $("[data-datepicker]").datepicker(); //searchs for all elements with attribute data-datepicker
    });
</script>