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()来搜索该元素的兄弟.