我在做什么
div
名为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>
我正在尝试做什么
我的目标是,当点击#smilies-box
中的任何图片时,将该图片的标题插入正下方的textarea
。
目前我正在尝试以下jQuery,但它没有找到textarea
?
的jQuery
$(document).on("click", "#smilies-box img", function(){
$(this).closest("textarea").val($(this).attr("title"));
});
我做错了什么?
答案 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');