jQuery - 最近的上一个兄弟姐妹 [重复]答案

【问题标题】：jQuery - Closest Previous Sibling [duplicate]jQuery - 最近的上一个兄弟姐妹 [重复]
【发布时间】：2014-07-01 01:48:37
【问题描述】：

通过查看 jQuery traversal 文档，我知道没有 jQuery 函数可以满足我的要求，所以我在问什么组合（如果有的话）可以解决问题.

如果我们为页面上的每个<textarea> 提供 1 个<span>，并且无需通过添加id 或classes 或data-attributes 等来获得创意，希望获得最接近的之前的<span> 到<textarea>，即当前keydown 事件的target。

我们可以使用什么jQuery遍历函数组合来解决这个问题？我已经研究并尝试了我所知道的一切。

查看此Fiddle 以更好地可视化此问题。

【问题讨论】：

标签： jquery html

【解决方案1】：

没有 jQuery 函数可以满足我的需求

其实你只要prev。

使用prev('span') 获取与给定选择器匹配的前一个元素。

$('div').on('keydown', 'textarea', function () {

        $(this).prev('span').text($(this).val())

})

见http://jsfiddle.net/aQ83s/2/

请注意，在keydown 事件中，textarea 的值尚未更改。

【讨论】：

干得好，谢谢。
这个答案是错误的。如果您添加回答者删除的<br/> 标签，则它不再起作用，根据操作，这是原点。看这里：jsfiddle.net/r3wt/aQ83s/16
@r3wt 这不是被问到的问题。这个答案没有“删除”任何东西，它基于提供的小提琴：jsfiddle.net/id_0t/aQ83s/1
@meagar 这是最初的问题。

【解决方案2】：

另一种选择，使用自定义数据属性和目标：

http://jsfiddle.net/r3wt/aQ83s/15/

jQuery

$('div').on('keyup', 'textarea', function() {
    var target = $("span[extra-data='"+$(this).attr('target')+"']");
    target.text($(this).val());
});

html

<div>
    <span extra-data="1">1</span>
    <br />
    <textarea target="1"></textarea>

    <span extra-data="2">2</span>
    <textarea target="2"></textarea>

    <span extra-data="3">3</span>
    <textarea target="3"></textarea>
</div>

【讨论】：

感谢您对此@r3wt 的意见。我的问题指出不使用 id 或 class 或 data- 属性很重要的原因是通过社区确认 jQuery 中没有我忽略或误用的函数（可以链接函数时很容易做到）或希望在生成动态 HTML 块时减轻使用该额外功能。再次感谢您的意见。