jquery多个id相同的功能

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

您可以使用“属性开头”选择器：

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

该选择器将匹配任何输入id 值以“datepicker”开头的 元素。另一种方法是为所有必需的元素提供一个公共类。

您还可以使用逗号分隔的列表按 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

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

Answer 5

您应该使用名为 has-datepicker 之类的 CSS 类，而不是 ID，并搜索它。

Answer 6

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