jquery varios ID misma función

Question

que tienen una tabla que tiene una entrada de fecha

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

Estoy tratando de acceder a él a través de la primera

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

¿Cómo accedo a todo?

Answer 1

Se podría utilizar el "attribute starts-with" Selector:

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

que el selector coincidirá con cualquier elemento de input cuya id valor comienza con "selector de fechas". Una alternativa sería dar a todos los elementos requeridos una clase común.

También puede seleccionar varios elementos por id utilizando una lista separada por comas:

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

Pero eso no es todo escalable si alguna vez necesita añadir más entradas.

Answer 2

La mejor manera es utilizar una clase:

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

pero también se puede utilizar esto:

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

El segundo enfoque no se aconseja.

Answer 3

En lugar de ID, debe usar una clase CSS llamada algo así como has-datepicker y buscar eso.

Answer 4

Como entiendo su pregunta, está tratando de seleccionar múltiples ID usando jQuery. He aquí cómo lo hace:

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

Simplemente separe los ID por comas.

Pero esta no es la mejor manera de lograr esto. Que realmente debe utilizar una clase: Asignar a cada td una clase y uso:

$('td.myClass') 

Alternativamente, podría asignar un ID de la tabla y seleccione todos sus hijos td. HTML:

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

jQuery:

$('table#myTable td') 

Answer 5

jQuery UI añade automáticamente la clase "hasDatePicker" a todos los elementos que tienen un selector de fechas. Puede consultar la página por algo como $ ("input.hasDatePicker") para obtener todos los selectores de fecha.

Answer 6

Usted puede utilizar esto como así $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)