CODEWITHSUNDEEP
jquerysiblings
Benjamin Crouzier
Benjamin Crouzier

Reputation: 41865

How to select only one sibling with jQuery?

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

Upvotes: 36

Views: 56552

Answers (6)

Barath Kumar
Barath Kumar

Reputation: 439

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

Upvotes: 1

DivinesLight
DivinesLight

Reputation: 2415

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

Upvotes: 1

Skylar Anderson
Skylar Anderson

Reputation: 5703

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

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

Upvotes: 12

James Allardice
James Allardice

Reputation: 165961

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.

Upvotes: 53

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could use next() or prev();

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

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

Upvotes: 2

NimChimpsky
NimChimpsky

Reputation: 47280

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

So it would be:

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

Upvotes: 2

Related Questions