How to select only one sibling with jQuery?

Question

I have this code:

<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>

and

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

siblings(".bar")[0] doesn't work. (no alert box pops up, and no javascript error)

What is the proper way to select one sibling only ?

jsFiddle try

Edit: I don't want to use prev() or next().

Answer 1

You can use the eq method to reduce the matched set of elements to one at a specific index:

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

That will select the first element in the set. In your case, you could simply use prev, as the element you're looking for comes directly before the clicked element:

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

The problem with the array notation method you were using is that it returns the actual DOM node contained within the jQuery object, and that's not going to have a text method. eq is the equivalent jQuery method to do this.