Question

i want focus on a text input inside some div, i have this html code:

<div class="place">
<div class="flip">
<div class="front"><img src="myAvatar.png"></div>
<div class="back">
<div class="name">MyName</div>
<input type="password" class="password" placeholder="Password" autocomplete="off">
<div class="button">Sign in</div>
</div>
</div>
</div>

in javascript i can detect when i touch the flip div in this way:

$('.flip').click(function(){
            $('.flip').removeClass('initiate');
            $(this).addClass('initiate');
            //$(this).children('back').children('.password').focus();
        });

but i want focus on the text input, how i can find it? i have tried in this way:

$(this).children('back').children('.password').focus();

but don’t work…any idea?

Answer 1

You omitted the . from your class-selector:

$(this).children('.back').children('.password').focus();

JS Fiddle demo.

But I’d suggest shortening that, for brevity, to:

$(this).find('.password').focus();

JS Fiddle demo.

References:

• find().