Question

我有3个具有相同ID的输入例如，如何获得第二个输入值？我使用eq()和nth-child()，无效

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

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

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，所以发回的结果（当表单发布时）也将是不可预测的。修复你的根本问题！

Answer 2

ID必须是唯一的。它不能重复。

您可以使用属性ID进行选择，例如

$('[id="txtItemQuantity"]').eq('1')

工作演示

alert($('[id="txtItemQuantity"]').eq('1').val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input tpye="text" id="txtItemQuantity" value="1">
<input tpye="text" id="txtItemQuantity" value="2">
<input tpye="text" id="txtItemQuantity" value="3">

Answer 3

试试这个：

console.log($("[id^=txtItemQuantity]").eq(1).val());

Answer 4

jsfiddle链接转到here

使用您的HTML link

更新了小提琴链接

<强> HTML

<div id="txtItemQuantity">
  <input value="1">
  <input value="2">
  <input value="3">
</div>

<强> jQuery的：

var res = $("#txtItemQuantity input:nth-child(2)").val();
alert(res); // result 2

Answer 5

试试这样：console.log($("#txtItemQuantity").eq(1).val()); 别忘了，数从0开始

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

5 个答案: