JQuery несколько идентификаторов же функции

Question

У меня есть таблица, которая имеет вход Дата

<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").datepicker({ 
      showButtonPanel: true 
     }); 
    }); 
    </script> 

Как получить доступ ко всему?

Answer 1

Вы можете использовать «attribute starts-with» селектор:

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

Этот селектор будет соответствовать любому input элемент, id значение начинается с «DatePicker». Альтернативой было бы дать всем необходимым элементам общий класс.

Вы также можете выбрать несколько элементов с помощью id используя список разделенных запятыми:

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

Но это не масштабируемый, если вы когда-либо необходимо добавить больше входов.

Answer 2

Лучше всего использовать класс:

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

но вы также можете использовать это:

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

Второй подход не рекомендуется.

Answer 3

Вместо идентификаторов вы должны использовать класс CSS, названный как-то вроде has-datepicker, и искать его.

Answer 4

Как я понимаю ваш вопрос, вы пытаетесь выбрать несколько идентификаторов, используя jQuery. Вот как вы это делаете:

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

Вы просто разделяете идентификаторы запятыми.

Но это не лучший способ достичь этого. Вы должны действительно использовать класс: присвоить каждому td класс и использование:

$('td.myClass') 

В качестве альтернативы, можно назначить идентификатор таблицы и выбрать все его td детей. HTML:

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

JQuery:

$('table#myTable td') 

Answer 5

JQuery UI автоматически добавляет класс "hasDatePicker" ко всем элементам, которые имеют выбора даты. Вы можете запросить страницу для чего-то вроде $ ("input.hasDatePicker"), чтобы получить все сборщики дат.

Answer 6

Вы можете использовать это, а $('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)