jquery nhiều id cùng chức năng

Question

Tôi có một bảng mà có một đầu vào ngày

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

Tôi cố gắng để truy cập nó qua cho người đầu tiên một

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

Làm thế nào để truy cập vào tất cả mọi thứ?

Answer 1

Bạn có thể sử dụng "attribute starts-with" selector:

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

Đó chọn sẽ phù hợp với bất kỳ yếu tố input mà id giá trị bắt đầu với "datepicker". Một thay thế sẽ là cung cấp cho tất cả các yếu tố cần thiết một lớp học phổ biến.

Bạn có thể chọn nhiều yếu tố bởi id sử dụng một danh sách bằng dấu phẩy:

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

Nhưng đó không phải là đặc biệt khả năng mở rộng nếu bạn đã bao giờ cần phải bổ sung thêm đầu vào.

Answer 2

Cách tốt nhất là sử dụng một lớp:

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

nhưng bạn cũng có thể sử dụng này:

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

Cách tiếp cận thứ hai là không đúng đắn.

Answer 3

Thay vì ID, bạn nên sử dụng lớp CSS có tên là has-datepicker và tìm kiếm điều đó.

Answer 4

Khi tôi hiểu câu hỏi của bạn, bạn đang cố gắng chọn nhiều ID bằng jQuery. Đây là cách bạn làm điều đó:

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

Bạn chỉ cần tách ID bằng dấu phẩy.

Nhưng, đây không phải là cách tốt nhất để thực hiện việc này. Bạn thực sự nên sử dụng một class: Gán mỗi td lớp và sử dụng:

$('td.myClass') 

Ngoài ra, bạn có thể gán một ID để bàn và chọn tất cả các td con của nó. HTML:

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

jQuery:

$('table#myTable td') 

Answer 5

jQuery UI tự động thêm lớp "hasDatePicker" cho tất cả các yếu tố đó có một chọn ngày. Bạn có thể truy vấn trang cho một cái gì đó như $ ("input.hasDatePicker") để có được tất cả các bộ chọn ngày.

Answer 6

Bạn có thể sử dụng này cũng $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)