jquery - 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>

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

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()搜索该元素的兄弟姐妹。