javascript - 如何通过索引号获取输入元素值

Question

我有 3 个具有相同 id 的输入例如如何获取第二个输入值？我使用 eq() 和 nth-child()，不起作用

console.log($("#txtItemQuantity:eq(2)").val());

注意:我想使用 id 作为标识符，而不是 class

HTML

<div class="masterItem">
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
</div>

Answer 1

这里没有人提供正确的解决方案。您的根本问题是您的无效标记。 No two elements in your HTML should have the same id 。这样做违反了 W3C 约定，并将产生不可预测的结果。不仅在这里，在其他方面也是如此。

更改标记以使 id 唯一并添加一个类，然后按以下方式选择:

<div class="masterItem">
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span>
                    <input id="txtItemName1" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
                   <input id="txtItemQuantity1" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span>
                         <input id="txtItemName2" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
                         <input id="txtItemQuantity2" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span>
                          <input id="txtItemName3" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
                        <input id="txtItemQuantity3" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
</div>

缩短:

<input id="txtItemName1" class="txtItemName form-control" type="text">

现在只需调整你的jquery选择器(来自你原来的问题)以使用类选择器(.)而不是id选择器(#)。

console.log($(".txtItemQuantity:eq(2)").val());

仅供引用，因为您没有提供姓名，并且您的输入共享相同的 ID，所以发回的结果(在发布表单时)也将是不可预测的。解决您的根本问题!