Menu
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?
796
Select the ID's of different element and then use each() method to apply the CSS property on all selected ID's element. Then use css() method to set the background color to pink to all selected elements. Display the text which indicates the multiple ID selectors.
HTML id AttributeYou cannot have more than one element with the same id in an HTML document.
An element can't have more than one ID and an ID can't be used more than once in a page.
Use the querySelectorAll() method to select elements by multiple ids, e.g. document. querySelectorAll('#box1, #box2, #box3') . The method takes a string containing one or more selectors as a parameter and returns a collection of the matching elements.
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.
185
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
