How to select only one sibling with jQuery?

U

6

36

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

Underscore answered 5/9, 2011 at 13:53 Comment(2)

Have a good question badge. This is the only place I could find an example of how to limit the siblings to a particular class. – Fears 25/2, 2016 at 14:56

@Fears You're welcome – Underscore 25/2, 2016 at 16:32

D

53

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.

Decrypt answered 5/9, 2011 at 13:58 Comment(6)

Thanks, i was looking for eq(). Btw, what does it mean ? – Underscore 5/9, 2011 at 14:2

@pinouchon: Read the documentation and find out. James even handed you the link so that you don't have to go to the vast effort of entering jQuery eq in Google. – Impatient 5/9, 2011 at 14:7

I'm asking because i didn't find out in the doc. – Underscore 5/9, 2011 at 14:16

@pinouchon - As Tomalak said, I gave you a link the the jQuery docs page in question. And here it is again: api.jquery.com/eq – Decrypt 5/9, 2011 at 14:26

I meant : what does eq stand for ? – Underscore 5/9, 2011 at 14:39

@pinochon - I've always assumed it stands for "equal" but I don't really know if that's correct, and if so, why! I'm guessing something like "get the element at index equals 0". – Decrypt 5/9, 2011 at 15:43

O

12

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

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

Ontario answered 5/9, 2011 at 13:59 Comment(0)

P

2

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

So it would be:

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

Petta answered 5/9, 2011 at 13:56 Comment(0)

C

2

You could use next() or prev();

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

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

Chaplet answered 5/9, 2011 at 13:56 Comment(0)

A

1

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

Assembler answered 5/9, 2011 at 14:2 Comment(0)

G

1

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