Как изменить атрибут id для второго элемента input в JavaScript

Оффтоп javascript
1

Привет, программисты! Мне нужно динамически изменить id второго input-элемента типа file. Я пытался использовать методы removeAttribute и setAttribute, но код не работает как ожидалось.

Пример HTML:

<div id="UpUp">
    <input type="file" name="files[]" id="fileElem" multiple>
    <input type="file" name="files[]" id="fileElem" multiple>
    <input type="file" name="files[]" id="fileElem" multiple>
</div>

Мой текущий JavaScript-код:

var targetInput = $('#UpUp > input:nth-child(2)');
targetInput.removeAttribute('id');
targetInput.setAttribute('id', 'new-unique-id');

Подскажите, как правильно изменить id для конкретного input-элемента?

2

Привет! Я бы посоветовал использовать ванильный js для решения твоей задачи. Вот рабочий вариант:

const inputs = document.querySelectorAll('#UpUp > input'); if (inputs.length >= 2) { inputs[1].id = 'new-unique-id'; }

Этот код более простой и надежный. Он работает напрямую с dom-элементами и не требует jquery. Главное - проверить количество инпутов, чтобы случайно не вылететь с ошибкой.

3

Щас разберемся! Нужно использовать чистый JS. Вот код, который точно сработает:

const inputs = document.querySelectorAll('#UpUp input'); if (inputs.length >= 2) { inputs[1].removeAttribute('id'); inputs[1].setAttribute('id', 'new-unique-id'); }

Главное - проверять количество элементов, чтоб не словить undefined. Метод `setAttribute` работает надежнее, чем прямое присваивание. Лично проверял не раз в своих проектах.

4

А можно чуть проще? Вот быстрый способ: document.querySelectorAll('#UpUp input')[1].id = 'new-unique-id'; Один клик и готово. Работает на сто процентов, без заморочек с setAttribute. Плюс сразу видно, что происходит.