jquery mehrere ids gleiche funktion

Ich habe eine Tabelle, die eine Datumseingabe hat

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

Ich versuche, über für den ersten darauf zuzugreifen

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

Wie greife ich auf alles zu?

Du könntest das “Attribut beginnt mit” Auswahl:

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

Dieser Selektor passt zu jedem input Element dessen id Wert beginnt mit “datepicker”. Eine Alternative wäre, allen benötigten Elementen eine gemeinsame Klasse zu geben.

Sie können auch mehrere Elemente auswählen, indem Sie id Verwenden einer durch Kommas getrennten Liste:

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

Aber das ist nicht besonders skalierbar, wenn Sie jemals weitere Eingänge hinzufügen müssen.

Der beste Weg ist, eine Klasse zu verwenden:

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

aber du kannst auch das verwenden:

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

Der zweite Ansatz wird nicht empfohlen.

Wie ich Ihre Frage verstehe, versuchen Sie, mehrere IDs mit jQuery auszuwählen. So machst du das:

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

Sie trennen die IDs einfach durch Kommas.

Dies ist jedoch nicht der beste Weg, dies zu erreichen. Sie sollten wirklich eine Klasse verwenden: Weisen Sie jede zu td eine Klasse und Verwendung:

$('td.myClass')

Alternativ könnten Sie der Tabelle eine ID zuweisen und alle auswählen td Kinder. HTML:

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

jQuery:

$('table#myTable td')

Sie können dies auch verwenden
$('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)

Anstelle von IDs sollten Sie eine CSS-Klasse mit dem Namen etwa verwenden has-datepicker und danach suchen.

Die jQuery-Benutzeroberfläche fügt automatisch die Klasse „hasDatePicker“ zu allen Elementen hinzu, die über eine Datumsauswahl verfügen. Sie können die Seite nach etwas wie $(“input.hasDatePicker”) abfragen, um alle Datumsauswahlen zu erhalten.