web-dev-qa-db-fra.com

jQuery: rechercher le champ de saisie le plus proche du bouton

J'ai un grand formulaire HTML avec plusieurs champs de saisie (un dans chaque ligne). Parmi ceux-ci, j'ai plusieurs champs avec une classe spécifique qui apparaissent à gauche d'un bouton. Il n'y a pas d'autres boutons ou champs dans ces lignes, ils ne contiennent donc que le champ et le bouton comme ci-dessous.

Comment puis-je obtenir l'ID d'un tel champ en cliquant sur le bouton à droite de celui-ci, c'est-à-dire le plus proche de lui?

Tous les champs en question ressemblent à ceci:

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

Tous les boutons en question ressemblent à ceci:

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

Merci pour toute aide à ce sujet, Tim.

jqueryhtmlclosestform-fields
19
user2571510

Car <input> est à gauche de <button> vous pouvez le trouver comme ceci:

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

Si <input> était après <button> alors vous pouvez le trouver comme ceci:

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

Vous pouvez aller au parent du bouton en utilisant parent() et trouver l'entrée dans les descendants en utilisant find()

OU, si vous avez un descendant à plusieurs niveaux

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

OU, si vous avez des descendants de niveau unique

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

ou

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

De même, vous pouvez utiliser next() ou prev()

13
Adil

Utilisez . Prev () ou . Next () s'ils sont côte à côte. (Cela devrait être le plus rapide.) Sinon, vous pouvez également utiliser . Le plus proche () pour trouver simplement l'instance la plus proche de cette classe.

La documentation devrait être plus que suffisante.

Modifier: Vous pouvez également utiliser . Frères et sœurs () pour rechercher parmi les frères et sœurs de cet élément.

6
sPaz