jquery multiple ids same function

Question

I have a table that has a date input

Answer 1

You can use this as well $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)

Answer 2

The best way is to use a class:

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

but you can also use this:

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

The second approach is not advised.

Answer 3

As I understand your question, you're trying to select multiple IDs using jQuery. Here's how you do that:

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

You just separate the IDs by commas.

But, this isn't the best way to accomplish this. You should really use a class: Assign each td a class and use:

$('td.myClass')

Alternatively, you could assign an ID to the table and select all of its td children. HTML:

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

jQuery:

$('table#myTable td')

Answer 4

Instead of IDs, you should use a CSS class named something like has-datepicker and search for that.

Answer 5

jQuery UI automatically adds the "hasDatePicker" class to all elements that have a date picker. You can query the page for something like $("input.hasDatePicker") to get all of the date pickers.

Answer 6

You could use the "attribute starts-with" selector:

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

That selector will match any input element whose id value starts with "datepicker". An alternative would be to give all the required elements a common class.

You can also select multiple elements by id using a comma-separated list:

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

But that's not particularly scalable if you ever need to add more inputs.