jQuery的多个ID相同的功能

问题描述：

<td style="background-color:#c6efce"><input type="text" id="datepicker0"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker1"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker2"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker3"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker4"></td>

表我想通过访问它的第一个

<script> 
    $(function() { 
     $("#datepicker0").datepicker({ 
      showButtonPanel: true 
     }); 
    }); 
    </script>

如何访问一切吗？

答

您可以使用“attribute starts-with”选择：

$(function() { 
    $("input[id^='datepicker']").datepicker({ 
     showButtonPanel: true 
    }); 
});

那选择将匹配任何input元素，它的id值与“日期选择器”开始。另一种选择是将所有必需的元素都提供给一个普通的类。

您可以通过id用逗号分隔的列表还可以选择多个元素：

$("#datepicker0, #datepicker1, #datepicker2"); //List as many as necessary

但是，这不是如果你需要添加更多的投入特别是可扩展性。

答

最好的办法是使用一类：

<td style="background-color:#c6efce"><input type="text" class="dp" id="datepicker0"></td> 
<td style="background-color:#c6efce"><input type="text" class="dp" id="datepicker1"></td> 
<td style="background-color:#c6efce"><input type="text" class="dp" id="datepicker2"></td> 
<td style="background-color:#c6efce"><input type="text" class="dp" id="datepicker3"></td> 
<td style="background-color:#c6efce"><input type="text" class="dp" id="datepicker4"></td> 
<script> 
    $(function() { 
     $(".dp").each(function(){ 
      $(this).datepicker({ 
       showButtonPanel: true 
      }); 
     }) 
    }); 
</script>

，但你也可以使用这个：

<td style="background-color:#c6efce"><input type="text" id="datepicker0"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker1"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker2"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker3"></td> 
<td style="background-color:#c6efce"><input type="text" id="datepicker4"></td> 

<script> 
    $(function() { 
     $("#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4").datepicker({ 
      showButtonPanel: true 
     }); 
    }); 
</script>

第二种方法是不明智的。

为什么您使用的每个函数在第一个例子，而不是像第二个节点列表上调用日期选择器？ – mikerobi

@mikerobi哈哈好点XD也许你可以提交这样的答案？ –

谢谢@JosephMarikle – sradha

答

而不是ID，你应该使用一个名为类似于has-datepicker的CSS类并搜索它。

答

正如我理解你的问题，你试图使用jQuery选择多个ID。以下是你如何做到的：

$('#1,#2,#3')

你只需用逗号分隔这些ID。

但是，这不是实现这一目标的最佳方法。你真的应该使用一个类：为每一个td类及用途：

$('td.myClass')

或者，您可以分配一个ID表，并选择它的所有td孩子。 HTML：

<table id="myTable"> 
    <td>text</td> 
    <td>text</td> 
</table>

的jQuery：

$('table#myTable td')

答

jQuery UI的自动添加 “hasDatePicker” 类具有日期选择器的所有元素。你可以查询页面的东西像$（“input.hasDatePicker”）来获取所有日期选择器。

没有'datepicker'应用于元素之前（在这种情况下...） –

啊，我读了原来的问题错了，认为原始问题询问有关访问它们，而不是创建它们，但我想OP确实提供了一个代码片段，他表明他正在创建一个... – ima007

答

您可以使用此以及 $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)

jQuery的多个ID相同的功能

相关推荐