jQuery：找到最靠近按钮的输入字段答案

【问题标题】：jQuery: find input field closest to buttonjQuery：找到最靠近按钮的输入字段
【发布时间】：2013-12-19 20:33:15
【问题描述】：

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

当点击按钮右侧（即最接近它）时，如何获取此类字段的 ID？

所有相关字段如下所示：

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

所有相关按钮如下所示：

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

感谢您对此提供的任何帮助，蒂姆。

【问题讨论】：

如果你显示整行的html会更有帮助，这样我们就可以看到按钮和日期字段之间的确切关系。还想查看您为尝试解决此问题而生成的任何代码。
假设输入和字段的深度相同，您可以使用 .siblings() 或组合或 .parent() 和 .children()。如果您需要 id 动态设置 for 属性以导致单击标签以聚焦输入，还有另一种方法：只需将输入放在标签内。
$('tr button').on('click',function(){var id = $(this).closest('tr').find('.dateField')[0].id})
像input[type=button]+input.dateField一样使用
谢谢大家！ - @ A.Wolff：这很好，对于我在这个特定情况下需要的东西已经足够了。

【解决方案1】：

您可以使用parent() 转到按钮的父级，并使用find() 在后代中查找输入

或者，如果你有多层后代

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

或者，如果你有单级后代

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

或

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

同样你可以使用next() 或prev()

【讨论】：

【解决方案2】：

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

文档的帮助应该绰绰有余。

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

【讨论】：

【解决方案3】：

因为<input>在<button>的左边，你可以这样找到它：

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

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

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

【讨论】：