jquery wiele identyfikatorów samą funkcję

Question

Mam tabelę, która ma wejście data

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

próbuję uzyskać do niego dostęp za pośrednictwem dla pierwszego

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

Jak uzyskać dostęp do wszystkiego?

Answer 1

Można użyć "attribute starts-with" selektora:

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

To selektor będzie pasował do dowolnego input element, którego id wartość zaczyna się od "datepicker". Alternatywą byłoby nadanie wszystkim wymaganym elementom wspólnej klasy.

Można również wybrać wiele elementów przez id podstawie listy oddzielonych przecinkami:

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

Ale to nie jest szczególnie skalowalne jeśli kiedykolwiek trzeba dodać więcej wejść.

Answer 2

Najlepszym sposobem jest użycie klasy:

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

ale można również użyć tego:

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

Drugie podejście nie jest zalecane.

Answer 3

Zamiast identyfikatorów należy użyć klasy CSS o nazwie podobnej do has-datepicker i wyszukać.

Answer 4

Jak rozumiem Twoje pytanie, próbujesz wybrać wiele identyfikatorów za pomocą jQuery. Oto, jak to zrobić:

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

Po prostu oddzielaj identyfikatory przecinkami.

Ale to nie jest najlepszy sposób, aby to osiągnąć. naprawdę powinieneś użyć klasy: przypisanie każdemu td klasę i zastosowanie:

$('td.myClass') 

Alternatywnie, można przypisać identyfikator do stołu i wybrać wszystkie jej td dzieci. HTML:

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

jQuery:

$('table#myTable td') 

Answer 5

jQuery UI automatycznie dodaje klasę "hasDatePicker" do wszystkich elementów, które mają wyboru daty. Możesz zapytać stronę o coś podobnego do $ ("input.hasDatePicker"), aby uzyskać wszystkie narzędzia do wybierania daty.

Answer 6

Można to wykorzystać jako dobrze $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)