如何用jQuery只选择一个兄弟？

Question

我有这个代码:

<ul>
  <li class="foo">foo text</li>
  <li class="foo2">foo2 text</li>
  <!-- more li here -->
  <li class="bar">bar text</li>
  <li class="bar2">bar2 text</li>
  <!-- more li here -->
  <li class="baz">clickme!</li>
</ul>

和

$(".baz").click(function() {
    alert("test: " + $(this).siblings(".bar")[0].text()); // Doesn't work
});

siblings(".bar")[0]不起作用.(没有弹出警告框,也没有javascript错误)

选择一个兄弟姐妹的正确方法是什么？

jsFiddle尝试

编辑:我不想使用prev()或next().

Answer 1

您可以使用该eq方法将匹配的元素集减少为特定索引处的元素集:

$(this).siblings(".bar").eq(0).text()

这将选择集合中的第一个元素.在您的情况下,您可以简单地使用prev,因为您要查找的元素直接在单击的元素之前:

$(this).prev(".bar").text()

您使用的数组表示法方法的问题是它返回jQuery对象中包含的实际DOM节点,并且不会有text方法.eq是这样做的等效jQuery方法.

Answer 2

您还可以使用第一个从jQuery对象中获取第一个元素:

alert(siblings(".bar").first().text());