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.

Answer 2

You can also grab the first element out of a jQuery object using first:

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