wake-up-neo.net

jQuery: Eingabefeld suchen, das der Schaltfläche am nächsten liegt

Ich habe ein großes HTML-Formular mit mehreren Eingabefeldern (eines in jeder Zeile). Darunter befinden sich mehrere Felder mit einer bestimmten Klasse, die links von einer Schaltfläche angezeigt werden. In diesen Zeilen befinden sich keine weiteren Schaltflächen oder Felder. Sie enthalten daher nur das unten angegebene Feld und die Schaltfläche.

Wie kann ich die ID eines solchen Feldes ermitteln, wenn ich auf die Schaltfläche rechts davon klicke, d. H. In der Nähe davon?

Alle fraglichen Felder sehen so aus:

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

Alle fraglichen Schaltflächen sehen folgendermaßen aus:

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

Vielen Dank für jede Hilfe, Tim.

19
user2571510

Weil <input> ist links von <button> Sie können es so finden:

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

Wenn <input> war hinter <button> dann findest du es so:

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

Sie können mit parent() zum übergeordneten Element der Schaltfläche wechseln und mit find() die Eingabe in untergeordneten Elementen suchen.

ODER, wenn Sie einen mehrstufigen Nachkommen haben

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

ODER, wenn Sie einstufige Nachkommen haben

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

oder

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

Ebenso können Sie next() oder prev() verwenden.

13
Adil

Verwenden Sie . Prev () oder . Next () , wenn sie nebeneinander liegen. (Dies sollte am schnellsten sein.) Andernfalls können Sie auch .most () verwenden, um einfach die nächstgelegene Instanz dieser Klasse zu finden.

Die Dokumentation sollte mehr als genug Hilfe sein.

Bearbeiten: Sie können auch . Siblings () verwenden, um nach Geschwistern dieses Elements zu suchen.

6
sPaz