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)