Question

What I’m Doing

• At the moment I have a form with multiple inputs and one textarea.
• Just above the textarea I have a div called smilies
• This div contains clickable smilies

HTML

<form>
    <input name="example-1" type="hidden" value="spongebob" />
    <input name="example-2" type="hidden" value="gary"  />

    <div id="smilies">
        <div id="smilies-box">
            <img src="http://example.com/smilies/smile.gif" title=":)" />
        </div>
    </div>

    <textarea name="example-3"></textarea>

    <button>Post</button>
</form>

What I’m Trying To Do

My aim is, when any image in #smilies-box is clicked, insert the title of that image into the textarea directly below.

Currently I’m trying the following jQuery but it’s not finding the textarea?

jQuery

$(document).on("click", "#smilies-box img", function(){
    $(this).closest("textarea").val($(this).attr("title"));
});

What am I doing wrong?

Answer 1

closest() is for going up the DOM hierarchy, not across or around. What you’ll likely be looking for is nextUntil() combined with .parent()

If you want to get really fancy, you can maybe get something like this to work for you :

$(document).on("click", "#smilies-box img", function(){
    $(this).closest(":has(textarea)").children().has(this).nextUntil('textarea').val($(this).attr("title"));
});