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?

James Allardice · Accepted Answer · 2011-10-22 17:16:44Z

72

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.

answered Oct 22, 2011 at 17:16

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Marikle · Accepted Answer · 2011-10-22 17:19:18Z

13

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.

answered Oct 22, 2011 at 17:19

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

2 Comments

mikerobi Over a year ago

Why did you use an each function in the first example, instead of calling datepicker on the node list like the second one?

Joseph Marikle Over a year ago

@mikerobi lol good point XD perhaps you can submit an answer as such?

Nathan · Accepted Answer · 2011-10-22 17:22:31Z

10

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

answered Oct 22, 2011 at 17:22

Nathan

7,09212 gold badges42 silver badges56 bronze badges

Comments

Saranya Vinoth · Accepted Answer · 2017-01-12 09:26:20Z

3

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

answered Jan 12, 2017 at 9:26

Saranya Vinoth

316 bronze badges

Comments

millimoose · Accepted Answer · 2011-10-22 17:20:06Z

0

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

answered Oct 22, 2011 at 17:20

millimoose

40.1k11 gold badges90 silver badges138 bronze badges

Comments

ima007 · Accepted Answer · 2011-10-22 17:23:13Z

0

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.

answered Oct 22, 2011 at 17:23

ima007

4773 silver badges12 bronze badges

2 Comments

James Allardice Over a year ago

Not before the datepicker has been applied to the element (as in this case...)

ima007 Over a year ago

Ah, I read the original question wrong, thought the original question asked about accessing them, not creating them, but I guess the OP did provide a code snippet where he showed he was creating one...

Collectives™ on Stack Overflow

jquery multiple ids same function

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related