web-dev-qa-db-ja.com

jQuery：ボタンに最も近い入力フィールドを見つける

複数の入力フィールド（各行に1つ）がある大きなHTMLフォームがあります。これらの中には、ボタンの左側に表示される特定のクラスを持つフィールドがいくつかあります。これらの行には他のボタンやフィールドはないため、以下のフィールドとボタンのみが含まれています。

すぐに、つまり最も近いボタンをクリックすると、そのようなフィールドのIDを取得するにはどうすればよいですか？

問題のすべてのフィールドは次のようになります：

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

問題のボタンはすべて次のようになります：

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

これについて助けてくれてありがとう、ティム。

jqueryhtmlclosestform-fields
19
user2571510

<input>は<button>の左側にあるため、次のように見つけることができます。

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

<input>が<button>の後にある場合、次のように見つけることができます。

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

parent()を使用してボタンの親に移動し、find()を使用して子孫の入力を検索できます。

または、マルチレベルの子孫がある場合

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

または、単一レベルの子孫がある場合

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

または

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

同様に、next()またはprev()を使用できます

13
Adil

。prev（） または 。next（） が隣り合っている場合は使用します。 （これは最速でなければなりません。）それ以外の場合は、 。closest（） を使用して、単にそのクラスの最も近いインスタンスを見つけることもできます。

ドキュメントは十分な助けになるはずです。

Edit：。siblings（） を使用して、その要素の兄弟を検索することもできます。

6
sPaz