如何使用 id 获取特定兄弟元素的值

Question

我想使用 id 获取特定同级元素的值，我在运行时构建表单，并且有许多元素具有相同的 id 但位于不同的部门。我尝试使用 $(this).siblings("#BillNo").val(); $(this).prev("#BillNo").val(); 但两者都返回未定义的值，

这是运行时的代码：佣金

<div id="bill1" class="bill hide withPadding">
    <h3>Bill 1</h3>
    <span>
    <label>Bill no</label>
    <input type="text" name="billNo" class="textField" id="BillNo"/>
    </span>
    <span>
    <label>Bill total</label>
    <input type="text" name="billTotal" class="textField" id="BillTotal"/>
    </span>
    <span>
    <input type="button" name="addBillDetails" value="Add bill items" id="addBillDetails"/>
    </span>
</div>  

<div id="bill2" class="bill hide withPadding">
    <h3>Bill 2</h3>
    <span>
    <label>Bill no</label>
    <input type="text" name="billNo" class="textField" id="BillNo"/>
    </span>
    <span>
    <label>Bill total</label>
    <input type="text" name="billTotal" class="textField" id="BillTotal"/>
    </span>
    <span>
    <input type="button" name="addBillDetails" value="Add bill items" id="addBillDetails"/>
    </span>
</div>  

<script type="text/javascript">
$(document).ready(function() {
   $("input#addBillDetails").live('click',function(){
        alert($(this).siblings("#BillNo").val());
        alert($(this).prev("#BillNo").val());

        });
}
</script>

Answer 1

$('#BillNo', $(this).closest("div.bill")).val()

这限制了对 #BillNo 父 div 的搜索。这是一个演示。

---

顺便说一句，您应该重新考虑您的 HTML。 id 理想情况下应该是唯一值。来自 HTML4 规范：

id = 姓名 [CS]

<块引用>

该属性为元素分配一个名称。该名称在文档中必须是唯一的。

并来自 HTML5 规范：

id 属性指定其元素的唯一标识符 (ID)。该值在元素的主子树 并且必须至少包含一个字符。该值不得包含任何空格字符。

例如，您可以使用类来区分不同的输入。瞄准他们也同样容易。例如http://jsfiddle.net/HxtfP/1/。

或者，只需省略 id 并使用 name 属性进行定位：http:// /jsfiddle.net/HxtfP/2/

Answer 2

尝试一下，但这不是很好的代码风格。

$(document).ready(function() {
   $("input[name='addBillDetails']").live('click',function(){
        alert(  $(this).parent().parent().find('#BillNo').val()  );
    });
});

Answer 3

为了让您的生活变得轻松，我建议您只需向这些字段添加 billNo 类，并在可能的情况下使用该类作为选择器。

否则：

$('#BillNo', $(this).parents(".bill")).val()

Answer 4

尝试：

$(this).parentsUntil(".bill").find("#BillNo").val();