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());

Answer 3

http://api.jquery.com/next/ and/or http://api.jquery.com/prev/.

So it would be:

$(this).prev().text()); or $(this).next().text());

Answer 4

You could use next() or prev();

$(".baz").click(function() {
    alert("test: " + $(this).prev(".bar").text());
});

fiddle here http://jsfiddle.net/fMT5x/2/

Answer 5

You can either do:

$(".baz").click(function() {
    alert("test: " + $(this).prev.html());
});

BUT, you have to be sure that a previous item exists to .baz

OR (Better)

$(".baz").click(function() {
    alert("test: " + $(this).siblings(".bar").eq(0).text());
});

OR (WORSE), just for reference, never use it :)

$(".baz").click(function() {
    var text = 0;
    $(this).siblings(".bar").each(function(){ text = $(this).text(); break; });
    alert("test: " + text);
});

Answer 6

Here is a link which is useful to learn about select a siblings element in Jquery.

How to select only one sibling with jQuery

$("selector").nextAll(); 
$("selector").prev(); 

you can also find an element using Jquery selector

$("h2").siblings('table').find('tr'); 

For more information, refer this link next(), nextAll(), prev(), prevAll(), find() and siblings in JQuery