CODEWITHSUNDEEP
jqueryhtml
user3228992
user3228992

Reputation: 1373

Jquery - Input focus() through parent and find nested element-class

I'm having this html. How can I with JQuery get the input-field with id="studio123" to be focused when click on the <a class="mm-subopen" href="#clickMe"></a>

<li class="img no-arrow join">
        <span class="user-wrapper">
            <a class="mm-subopen" href="#clickMe"></a>
        </span>
        <ul class="chat-messages" id="studio">
            <div class="chat-input">
                <input type="text" class="form-control" id="studio123" placeholder="Type your message" />
            </div>
        </ul>
    </li>

I was thinking of something like:

$('.mm-subopen').click(function () {
    //find this.class parent, parent (witch would be:  <li class="img no-arrow join">)
    //and then trough: <li class="img no-arrow join"> find the input in same scope and get it focused
});

Any help would be appreciated!

Upvotes: 1

Views: 1638

Answers (2)

akaBase
akaBase

Reputation: 2250

This is what your after i think

$('.mm-subopen').click(function () {
    $(this).parents("li").find(":input").focus();
});

here is a JSFIDDLE

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You can replace the link

<a class="mm-subopen" href="#clickMe"></a>

with label:

<label class="mm-subopen" for="studio123"></label>

And no javascript is needed. Or if you do need javascript try this:

$('.mm-subopen').click(function () {
    $(this).closest('li').find('input').focus();
});

Upvotes: 2

Related Questions