jQuery：查找最接近按钮的输入字段

Question

我有一个包含多个输入字段的大型HTML表单（每行一个输入字段）。其中，我有几个具有特定类别的字段，这些字段显示在一个按钮左侧。在这些行中没有其他按钮或字段，因此它们只包含以下字段和按钮。

当单击紧挨着该字段右侧的按钮时，我如何获取这样一个字段的ID？

所有相关字段都具有以下外观：

<input type="text" class="dateField" data-date-format="yyyy-mm-dd" id="field1" name="field1" />

所有相关按钮外观均如此：

<button type="button">Select Date</button>

感谢你的帮助，Tim。

- user2571510

---

如果您展示整行HTML代码，我们就能够更清晰地看到按钮和日期字段之间的具体关系，这会更有帮助。同时也想看一下您编写的任何解决该问题的代码。 - Kevin B

假设输入和字段在同一深度，您可以使用 .siblings() 或 .parent() 和 .children() 的组合。如果您需要动态设置 id 以使 for 属性引起标签点击聚焦于输入，则还有另一种方法：将输入放置在标签内部即可。 - Virus721

$('tr button').on('click',function(){var id = $(this).closest('tr').find('.dateField')[0].id}) - A. Wolff

使用类似于 input[type=button]+input.dateField 的方式。 - Pranav C Balan

谢谢大家！- @ A.Wolff：这很棒，对于我在这个特定情况下所需的已经足够了。 - user2571510

Answer 1

由于 <input> 在 <button> 的左侧，因此您可以像这样找到它：

$('button').on('click', function(){
    alert($(this).prev('input').attr('id'));
});

如果 <input> 在 <button> 之后，那么您可以像这样找到它：

$('button').on('click', function(){
    alert($(this).next('input').attr('id'));
});

- MonkeyZeus

---

谢谢！我为此苦苦挣扎了一段时间。 - skwidbreth

@skwidbreth 很高兴你觉得这个有用！ - MonkeyZeus

Answer 2

parent()函数可以让你回到按钮的父级元素，再使用find()函数在子代元素中查找输入框。

或者，如果你有多层后代元素

$(this).parent().find('.dateField')

或者，如果您有单层的后代

$(this).parent().children('.dateField')

或者

$(this).siblings('.dateField');

同样地，您可以使用next()或prev()

- Adil

---

".find()是递归的。.children()可能/应该更快。" - Virus721

Answer 3

如果它们彼此相邻，使用.prev()或.next()，这应该是最快的方法。

否则，您还可以使用.closest()来查找该类的最近实例。

文档应该已经足够帮助了。

编辑：您还可以使用.siblings()搜索该元素的同级元素。

- sPaz

---

谢谢，这也非常有帮助！ - user2571510