У меня есть большая форма HTML с несколькими полями ввода (по одному в каждой строке). Среди них у меня есть несколько полей с определенным классом, которые появляются слева от кнопки. В этих строках нет других кнопок или полей, поэтому они содержат только поле и кнопку, как показано ниже.
Как я могу получить идентификатор такого поля при нажатии на кнопку справа от него, т.е. ближе к нему?
Все поля, о которых идет речь, выглядят следующим образом:
<input type="text" class="dateField" data-date-format="yyyy-mm-dd" id="field1" name="field1" />
Все соответствующие кнопки выглядят следующим образом:
<button type="button">Select Date</button>
Спасибо за любую помощь в этом, Тим.
Поскольку <input> находится слева от <button>, вы можете найти его так:
$('button').on('click', function(){
alert($(this).prev('input').attr('id'));
});
Если <input> был после <button>, вы можете найти его следующим образом:
$('button').on('click', function(){
alert($(this).next('input').attr('id'));
});
Вы можете перейти к родительской кнопке с помощью parent() и найти вход для потомков с помощью find()
ИЛИ, если у вас многоуровневый потомок
$(this).parent().find('.dateField')
ИЛИ, если у вас есть потомки одного уровня
$(this).parent().children('.dateField')
или
$(this).siblings('.dateField');
Аналогичным образом вы можете использовать next() или prev()
Используйте . prev() или . next() если они рядом друг с другом. (Это должно быть быстрее всего.) В противном случае вы также можете использовать . Closeest(), чтобы просто найти ближайший экземпляр этого класса.
Документация должна быть более чем достаточной.
Edit: Вы также можете использовать . Siblings() для поиска своих братьев и сестер этого элемента.