it-swarm-id.com

beberapa fungsi jquery id yang sama

Saya memiliki tabel yang memiliki input tanggal

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

Saya mencoba mengaksesnya melalui yang pertama

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

Bagaimana saya mengakses semuanya?

24
Autolycus

Anda bisa menggunakan pemilih " atribut begin-with ":

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

Pemilih itu akan cocok dengan elemen input mana pun yang id nilainya dimulai dengan "datepicker". Alternatifnya adalah memberikan semua elemen yang diperlukan kelas umum.

Anda juga dapat memilih beberapa elemen dengan id menggunakan daftar yang dipisahkan koma:

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

Tapi itu tidak terlalu scalable jika Anda perlu menambahkan lebih banyak input.

61
James Allardice

Cara terbaik adalah menggunakan kelas:

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

tetapi Anda juga dapat menggunakan ini:

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

Pendekatan kedua tidak disarankan.

12
Joseph Marikle

Saat saya memahami pertanyaan Anda, Anda mencoba memilih beberapa ID menggunakan jQuery. Inilah cara Anda melakukannya:

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

Anda hanya memisahkan ID dengan koma.

Tapi, ini bukan cara terbaik untuk mencapai ini. Anda harus benar-benar menggunakan kelas: Tetapkan setiap kelas td dan gunakan:

$('td.myClass')

Atau, Anda dapat menetapkan ID ke tabel dan memilih semua td anak-anaknya. HTML:

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

jQuery:

$('table#myTable td')
5
Nathan

Alih-alih ID, Anda harus menggunakan kelas CSS yang bernama sesuatu seperti has-datepicker dan mencarinya. 

0
millimoose

jQuery UI secara otomatis menambahkan kelas "hasDatePicker" ke semua elemen yang memiliki pemilih tanggal. Anda dapat meminta halaman untuk sesuatu seperti $ ("input.hasDatePicker") untuk mendapatkan semua pemilih tanggal.

0
ima007

Anda dapat menggunakan ini juga $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)

0
Saranya Vinoth