Question

我有一个包含多个使用datepicker的输入字段的表单。我刚刚为他们创建了ID，这个工作正常，但现在我需要在同一页面上显示多个表单的实例中使用它。

有没有办法创建一个jQuery函数，它会动态地将ID添加到任何具有“datepicker”类的元素，并使datepicker在这些元素上工作？

类似的东西：

$('.datepicker').append('ID','datepicker + (1)');
$("#datepicker + (1)").datepicker();

我知道这实际上不会起作用，但我认为这是最容易解释的方法，+（1）后缀是ID的数字。

我当前的静态元素代码就像这样。

$("#datepicker").datepicker();
$("#datepicker01").datepicker();
$("#datepicker02").datepicker();
$("#datepicker03").datepicker();
$("#datepicker04").datepicker();
$("#datepicker05").datepicker();
$("#datepicker06").datepicker();

感谢您的帮助，欢呼：）

Answer 1

您根本不需要ID，您可以使用以下方法将它们全部绑定：

$('.datepicker').datepicker();

演示：http://jsfiddle.net/ambiguous/ua4bc/

大多数插件可以同时绑定到多个元素，这就是为什么它们几乎都是这样的原因：

return this.each(function() { ... });

内

如果您出于其他目的需要这些ID，那么您可以这样做：

$('.datepicker').each(function(i) {
    this.id = 'datepicker' + i;
}).datepicker();

演示（使用DOM检查器查看ID）：http://jsfiddle.net/ambiguous/6zfEY/

Answer 2

$(function(){
    $('.datepicker').each(function(i){
        $(this).attr('id', $(this).attr('class')+parseInt(i+1));
    });

    // You can call like
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
    $("#datepicker3").datepicker();
});

但我认为无论如何你都不需要添加id。

Answer 3

您好我使用Spring MVC 3.0和...尝试了此绑定它很有用，真好！我有脚本

<script type="text/javascript">
  $(function(){
  $(".datepicker").datepicker({ dateFormat:"dd/mm/yy" });
  });
</script>

然后，在我的情况下，使用JSP和JSTL我能够将JQueryPicker绑定到我的dinamically创建的元素，这里是一段代码，如果你看到它是什么时候因为我正在开发更多事情，但想法是一样的：

<c:when test="${fieldVar.type == 'DATE'}">
  <td><form:input path="fieldWrapperElements[${status.index}].dateValue"class="datepicker"/></td>
</c:when>

jQuery Datepicker如何动态地将ID添加到输入字段

3 个答案: