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

您可以使用" attribute starts-with "选择器:

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

该选择器将匹配任何值以"datepicker"开头的input元素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')