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。

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'));
});

Answer 2

您可以使用parent()转到按钮的父级，然后使用find()

在后代中查找输入

或者，如果你有多级后代

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

或者，如果您有单级后代

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

或

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

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

Answer 3

如果他们彼此相邻，请使用.prev()或.next()。 （这应该是最快的。） 否则，您也可以使用.closest()来查找该类的最近实例。

文档应该是足够的帮助。

修改 您还可以使用.siblings()搜索该元素的兄弟姐妹。