jquery multiple ids same function

Question

I have a table that has a date input

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

I am trying to access it via for the first one

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

How do I access everything?

Answer 1

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.

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.