Comment définir le focus sur le champ d'entrée à l'aide de JQuery

Compte tenu de la structure HTML suivante:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

qui sera répété plusieurs fois sur la page, comment définir le focus sur le champ de saisie dans le .bottomdiv lorsqu'un utilisateur clique sur le lien dans le .topdiv?

Je fais actuellement .bottomapparaître le div avec succès sur clic en utilisant le code JQuery ci-dessous, mais je n'arrive pas à comprendre comment définir le focus sur le champ de saisie en même temps.

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

Merci!

Essayez ceci, pour définir le focus sur le premier champ de saisie:

$(this).parent().siblings('div.bottom').find("input.post").focus();

Si l'entrée se trouve dans une boîte de dialogue modale bootstrap, la réponse est différente. Copier de Comment définir le focus vers la première entrée de texte dans un modal bootstrap après avoir montré ce qui est nécessaire:

$('#myModal').on('shown.bs.modal', function () {
  $('#textareaID').focus();
})  

La réponse de Justin n'a pas fonctionné pour moi (Chromium 18, Firefox 43.0.1). jQuery .focus()crée une surbrillance visuelle, mais le curseur de texte n'apparaît pas dans le champ (jquery 3.1.0).

Inspiré par https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , j'ai ajouté l' attribut autofocus au champ de saisie et le tour est joué!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}