jQuery: найти поле ввода, ближайшее к кнопке

У меня есть большая HTML-форма с несколькими полями ввода (по одному в каждой строке). Среди них у меня есть несколько полей с определенным классом, которые появляются слева от кнопки. В этих строках нет других кнопок или полей, поэтому они содержат только поле и кнопку, как показано ниже.

Как мне получить ID такого поля при нажатии на кнопку прямо из него, т.е. ближайшую к нему?

Все рассматриваемые поля выглядят следующим образом:

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

Все рассматриваемые кнопки выглядят следующим образом:

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

Спасибо за любую помощь в этом, Тим.


html jquery form-fields closest
person user2571510    schedule 03.12.2013    source источник
comment
Было бы полезнее, если бы вы показали html всей строки, чтобы мы могли видеть точную взаимосвязь между кнопкой и полем даты. Также хотелось бы увидеть любой код, который вы создали, чтобы попытаться решить эту проблему.   -  person Kevin B    schedule 03.12.2013
comment
Если предположить, что ввод и поле имеют одинаковую глубину, вы можете использовать .siblings() или их комбинацию или .parent() и .children(). Если вам нужен идентификатор для динамической установки атрибута for, чтобы щелчок по метке сфокусировал ввод, есть другой способ: просто поместите ввод внутрь метки.   -  person Virus721    schedule 03.12.2013
comment
использовать как input[type=button]+input.dateField   -  person Pranav C Balan    schedule 03.12.2013
comment
Спасибо всем ! - @ A.Wolff: это здорово и уже достаточно для того, что мне было нужно в данном конкретном случае.   -  person user2571510    schedule 03.12.2013

Ответы (3)


arrow_upward
41
arrow_downward

Поскольку <input> находится слева от <button>, вы можете найти его так:

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

Если <input> было после <button>, то вы можете найти его так:

$('button').on('click', function(){
    alert($(this).next('input').attr('id'));
});
person MonkeyZeus    schedule 03.12.2013
comment
Благодарю вас! Я боролся с этим некоторое время. - person skwidbreth; 09.06.2016
comment
@skwidbreth Рад, что вы нашли это полезным! - person MonkeyZeus; 09.06.2016

arrow_upward
15
arrow_downward

Вы можете перейти к родителю кнопки, используя parent(), и найти вход в потомках, используя find()

ИЛИ, если у вас многоуровневый потомок

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

ИЛИ, если у вас есть потомки одного уровня

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

or

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

Точно так же вы можете использовать next() или prev()

person Adil    schedule 03.12.2013
comment
.find() является рекурсивным. .children() может/должен быть быстрее. - person Virus721; 03.12.2013

arrow_upward
6
arrow_downward

Используйте .prev() или .next(), если они находятся рядом друг с другом. (Это должно быть самым быстрым.) В противном случае вы также можете использовать .closest(), чтобы просто найти ближайший экземпляр этот класс.

Документации должно быть более чем достаточно.

Изменить. Вы также можете использовать .siblings() для поиска среди одноуровневых элементов этот элемент.

person sPaz    schedule 03.12.2013
comment
Спасибо, это тоже очень полезно! - person user2571510; 03.12.2013