使用jQuery更改div click上最接近的textarea值

时间:2012-10-23 01:10:34

标签: jquery jquery-selectors

我在做什么

  • 目前我有一个包含多个输入和一个textarea的表单。
  • 就在textarea上方,我有div名为smilies
  • 此div包含可点击的表情符号

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>

我正在尝试做什么

我的目标是,当点击#smilies-box中的任何图片时,将该图片的标题插入正下方的textarea

目前我正在尝试以下jQuery,但它没有找到textarea

的jQuery

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

我做错了什么?

3 个答案:

答案 0 :(得分:3)

closest()用于向上 DOM层次结构,而不是跨越或围绕。您可能正在寻找的是nextUntil().parent()

相结合

如果你想变得非常花哨,你可以得到这样的东西为你效劳:

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

答案 1 :(得分:1)

.closest()将为您提供与选择器匹配的最近父级。而是寻找具有teatarea的形式。像这样:

$(document).on("click", "#smiles-box img", function() {
   $this = $(this);
   $("textarea[name='example-3']", $this.closest("form"))
      .val($this.attr("title"));
});

答案 2 :(得分:0)

我设法使用以下内容获取目标textarea:

var targettextarea = $(this).parent().parent().parent().children('textarea');