Я хочу найти индекс определенного массива имени динамически, используя скрипт java или jquery

Question

Мой пример кода

<div class="my_class_1">
    <input type="text" name="name_1[]" value="1" />
    <input type="text" name="name_1[]" value="2" />
</div>
<div class="my_class_2">
    <input type="text" name="name_1[]" value="3" />
    <input type="text" name="name_1[]" value="4" />
</div>

<div class="my_class_3">
    <input type="text" name="name_1[]" value="5" />
    <input type="text" name="name_1[]" value="6" />
</div>

Здесь текстовое поле с именем_1 будет динамически добавляться в любой div my_class_1 / my_class_2 / my_class_3 при добавлении нового типа ввода, я хотел получить предыдущее значение и добавить в новое текстовое поле для ex if я добавляю новое текстовое поле для класса div my_class_1, новое значение текстового поля должно быть 2, как это

<input type="text" name="name_1[]" value="2" />

, когда я добавляю новое текстовое поле для класса div my_class_2, новое значение текстового поля должно быть 4, как это

<input type="text" name="name_1[]" value="4" />

Я попробовал несколько методов в javascript

<script>
let lastElement = document.getElementsByName("name_1[]");
let leng1 = lastElement.length;
lastValue = (typeof lastElement[lastElement-1] == 'undefined') ?  0 : lastElement[lastElement - 1].value;
</script>

Это всегда возвращает мне последнее значение

Может ли кто-нибудь помочь мне в этом заранее Спасибо

Answer 1

С помощью document.querySelector() вы можете выбрать один элемент с помощью CSS селекторов. Поэтому вы можете выбрать контейнер, в котором хотите выбрать вход, и использовать псевдоселектор :last-of-type, чтобы выбрать последний вход, который соответствует критериям, которые вы ищете. Это позволяет всегда выбирать последний вход в правильной позиции.

let lastElement = document.querySelector('.my_class_2 input[name="name_1[]"]:last-of-type');
let lastValue = lastElement.value;
console.log(lastElement, lastValue);

<div class="my_class_1">
    <input type="text" name="name_1[]" value="1" />
    <input type="text" name="name_1[]" value="2" />
</div>
<div class="my_class_2">
    <input type="text" name="name_1[]" value="3" />
    <input type="text" name="name_1[]" value="4" />
</div>

<div class="my_class_3">
    <input type="text" name="name_1[]" value="5" />
    <input type="text" name="name_1[]" value="6" />
</div>