Jquery несколько идентификаторов той же функции
У меня есть таблица с вводом даты
<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>
Как мне получить доступ ко всему?
Ответы
Ответ 1
Вы можете использовать "атрибут start-with":
$(function() {
$("input[id^='datepicker']").datepicker({
showButtonPanel: true
});
});
Этот селектор будет соответствовать любому элементу input
, значение id
начинается с "datepicker". Альтернативой было бы дать всем необходимым элементам общий класс.
Вы также можете выбрать несколько элементов id
с помощью списка, разделенного запятыми:
$("#datepicker0, #datepicker1, #datepicker2"); //List as many as necessary
Но это не особенно масштабируемо, если вам когда-либо понадобится добавить дополнительные входы.
Ответ 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>
Второй подход не рекомендуется.
Ответ 3
Насколько я понимаю ваш вопрос, вы пытаетесь выбрать несколько идентификаторов, используя jQuery. Вот как вы это делаете:
$('#1,#2,#3')
Вы просто разделяете идентификаторы запятыми.
Но это не лучший способ добиться этого. Вы действительно должны использовать класс: Назначьте каждый класс td
a и используйте:
$('td.myClass')
В качестве альтернативы вы можете назначить идентификатор таблице и выбрать все его дочерние элементы td
. HTML:
<table id="myTable">
<td>text</td>
<td>text</td>
</table>
JQuery
$('table#myTable td')
Ответ 4
Вместо идентификаторов вы должны использовать класс CSS с именем has-datepicker
и искать его.
Ответ 5
jQuery UI автоматически добавляет класс hasDatePicker ко всем элементам, у которых есть выбор даты. Вы можете запросить страницу для чего-то вроде $( "input.hasDatePicker" ), чтобы получить все сборщики дат.
Ответ 6
Вы также можете использовать это
$('#datepicker0,#datepicker1,#datepicker2,#datepicker3,#datepicker4)