我想通过使用 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>

这里带有 name_1 的文本框将在任何 div my_class_1/my_class_2/my_class_3 中动态添加，同时添加新的输入类型我想获取以前的值并添加到新的文本框例如，如果我为 div 类 my_class_1 添加新文本框，则新文本框值应该像这样成为2

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

当我为 div class 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">&nbsp; &nbsp; <input type="text" name="name_1[]" value="1" />&nbsp; &nbsp; <input type="text" name="name_1[]" value="2" /></div><div class="my_class_2">&nbsp; &nbsp; <input type="text" name="name_1[]" value="3" />&nbsp; &nbsp; <input type="text" name="name_1[]" value="4" /></div><div class="my_class_3">&nbsp; &nbsp; <input type="text" name="name_1[]" value="5" />&nbsp; &nbsp; <input type="text" name="name_1[]" value="6" /></div>