jQuery - 最近的前一个兄弟节点

Question

我通过查看jQuery 遍历文档，意识到没有一个jQuery函数能够完成我正在寻找的功能，所以我想知道是否有一种组合（如果有的话）可以解决问题。

如果我们在页面上为每个<textarea>都有一个<span>，而且不需要通过添加id、class或data-属性等来进行创意设计，希望获得最接近当前keydown事件的target的<textarea>之前的<span>。

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

请查看这个Fiddle以更好地可视化这个问题。

- id.ot

Answer 1

没有一个jQuery函数可以做我想要的事情

实际上，你需要的只是 prev。

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

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

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

})

请查看http://jsfiddle.net/aQ83s/2/。

请注意，在keydown事件中，文本区域的值还没有被改变。

- user229044

---

干得好，谢谢。 - id.ot

这个答案是错误的。如果您添加了答题者删除的<br/>标签，它将不再起作用，而这正是原始问题的重点。请参见此处：http://jsfiddle.net/r3wt/aQ83s/16/。 - r3wt

@r3wt 这不是被问到的问题。这个答案没有“删除”任何东西，它是基于提供的代码片段：http://jsfiddle.net/id_0t/aQ83s/1/ - user229044

@meagar 这是最初的问题。 - r3wt

Answer 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

---

感谢@r3wt的意见。我的问题之所以强调不使用id、class或data-属性，是为了通过社区确认我没有忽略或误用jQuery的某个函数（在链式函数中这很容易发生），或者在生成动态HTML块时希望减少使用额外功能。再次感谢您的意见。 - id.ot