Question

我有一个有日期输入的表

<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>

如何访问所有内容？

Answer 1

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

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

该选择器将匹配input值以“datepicker”开头的任何id元素。另一种方法是给所有必需元素一个共同的类。

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

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

但如果您需要添加更多输入，那么这不是特别可扩展。

Answer 2

最好的方法是使用一个类：

<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>

不建议采用第二种方法。

Answer 3

据我了解你的问题，你正在尝试使用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')

Answer 4

您应该使用名为has-datepicker之类的CSS类来代替ID，并搜索它。

Answer 5

jQuery UI会自动将“hasDatePicker”类添加到具有日期选择器的所有元素中。您可以在页面中查询类似$（“input.hasDatePicker”）的内容以获取所有日期选择器。

Answer 6

你也可以使用它 $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)

jquery多个id相同的函数

6 个答案: