jQuery API

.siblings()

Categories: Traversing > Tree Traversal

.siblings( [selector] ) Returns: jQuery

Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

  • version added: 1.0.siblings( [selector] )

    selectorA string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a simple list on it:

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

If we begin at the third item, we can find its siblings:

$('li.third-item').siblings().css('background-color', 'red');

The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.

The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree.

Examples:

Example: Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate). 

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 20px; font-size:16px; padding:5px; 
      font-weight:bolder; }
  .hilite { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li>One</li>

    <li>Two</li>
    <li class="hilite">Three</li>
    <li>Four</li>
  </ul>

  <ul>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>

  </ul>
  <ul>
    <li>Eight</li>
    <li class="hilite">Nine</li>

    <li>Ten</li>
    <li class="hilite">Eleven</li>
  </ul>
  <p>Unique siblings: <b></b></p>
<script>

    var len = $(".hilite").siblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);
</script>

</body>
</html>

Demo:

Example: Find all siblings with a class "selected" of each div. 

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div><span>Hello</span></div>

  <p class="selected">Hello Again</p>
  <p>And Again</p>
<script>$("p").siblings(".selected").css("background", "yellow");</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .siblings() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .siblings()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • hossein

    What is the difference between filter() and find() and siblings()?

    • Kevsta

      .find() gets the descendants of each element in the current set of matched elements, filtered by a selector which is similar to .filter() which reduces the set of matched elements to those that match the selector or pass the function's test (extra functionality here).
      .siblings() gets the siblings of each element in the set of matched elements, optionally filtered by a selector.

      So they all filter/find elements but the first two always require a selector, the second can take the result of a function too and the last one can work without a selector and extends it's search to items of the same sort that are under the same parent.

      Depending on the project you are working on, one of these will be more appropriate/efficient to give you the results you are looking for.

    • Marcf

      filter: take current set and reduce it, eg table rows, filter :o dd, odd rows only
      find: descendants of set, eg cells of table rows
      siblings: elements at the same level, eg siblings of a table row = the other rows in the table

  • Andyday

    Is $(this).siblings() the same as $(this).parent().children()

    • Matan Arie

      No.
      $(this).parent().children() selects all the children of the parent (including $(this)).
      $(this).siblings() includes all the children of the parent except for $(this)

  • jeffreyC

    Hi All:

    I’m new to JQuery and I’m trying to find the equivalent filtering and traversing of a loaded external XML fle that I’ve been able to do with E4X in my Flex app: I would like to return an xml node by finding its sibling (by name) with an expression.

    For example, my XML file has many nodes, but within each there is a child node to differentiate each . With JQuery, can I find the node with a specific (string) and then find a specific sibling node – like , for example?
    In E4X this would look like this:
    x.Item.(Label==’section01′).web_url
    where x is the loaded xml/DOM object.

    Any ideas would be greatly appreciated.

    • http://www.learningjquery.com/ Karl Swedberg

      One way to do this would be to chain a series of DOM traversal methods together. Something like this should work (if I've understood you correctly and “web_url” is a sibling of “label”):

      var myItems = $('x').find('Item label').filter(function() {  return $(this).text() == 'some string';}).siblings('web_url');

      In the future, it would be more appropriate to post this sort of question to the jQuery forum at http://forum.jquery.com/

  • Anandchakru

    How to find the position of the children ?

    Thanks,
    `A

  • http://twitter.com/wytzeschouten Wytze Schouten

    So what if the next item in the DOM tree is not of the same type? I.e.
    <div>

    Paragraph

    <button>Button</button>

    Does the button count as a sibling of the paragraph? The documentation is not very explicit, although it *appears* that elements must be of same type. In which case I wonder if there is some other function like .neighbor() to deal with this.
    </div>

  • Elgarch Hicham

    here another example of using sibligns :-P

    $('li ~ p').css('background','skyblue');

    Here we set a background-color blue to all sibligns of li .

    Keep learning

  • Zq010

    var len = $(“.hilite”).siblings()
    .css(“color”, “red”)
    .length;
    $(“b”).text(len);
    In the above example,I want to know why the 'len'=7,I think it is 8;

    • TomB

      The key to this is to remember that the selector loops through each list item where the criteria is met one-at-a-time.

      1st list: siblings are for “one”, “two” and four” (“three” is ignored as this is the selector)
      2nd list: no siblings
      3rd list: it loops through this one twice as there is a class selector of “hilite” applied to 2 list elements (1st loop makes up “eight”,”ten”,”eleven” (“nine” is ignored as this is the selector), 2nd loop makes up “eight”, “nine”, “ten” (“eleven” is ignored as this is the selector)) resulting in “eight”, “nine” ten”, “eleven”
      Total =7

    • knoxy

      counting starts at 0 in javascript

      • Tenacious[B]

        True, however .length in javascript starts at 1, not zero.

  • Zq010

    var len = $(“.hilite”).siblings()
    .css(“color”, “red”)
    .length;
    $(“b”).text(len);
    In the above example,I want to know why the 'len'=7,I think it is 8;

  • TomB

    The key to this is to remember that the selector loops through each list item where the criteria is met one-at-a-time.

    1st list: siblings are for “one”, “two” and four” (“three” is ignored as this is the selector)
    2nd list: no siblings
    3rd list: it loops through this one twice as there is a class selector of “hilite” applied to 2 list elements (1st loop makes up “eight”,”ten”,”eleven” (“nine” is ignored as this is the selector), 2nd loop makes up “eight”, “nine”, “ten” (“eleven” is ignored as this is the selector)) resulting in “eight”, “nine” ten”, “eleven”
    Total =7

  • TomB

    The key to this is to remember that the selector loops through each list item where the criteria is met one-at-a-time.

    1st list: siblings are for “one”, “two” and four” (“three” is ignored as this is the selector)
    2nd list: no siblings
    3rd list: it loops through this one twice as there is a class selector of “hilite” applied to 2 list elements (1st loop makes up “eight”,”ten”,”eleven” (“nine” is ignored as this is the selector), 2nd loop makes up “eight”, “nine”, “ten” (“eleven” is ignored as this is the selector)) resulting in “eight”, “nine” ten”, “eleven”
    Total =7

  • TomB

    The key to this is to remember that the selector loops through each list item where the criteria is met one-at-a-time.

    1st list: siblings are for “one”, “two” and four” (“three” is ignored as this is the selector)
    2nd list: no siblings
    3rd list: it loops through this one twice as there is a class selector of “hilite” applied to 2 list elements (1st loop makes up “eight”,”ten”,”eleven” (“nine” is ignored as this is the selector), 2nd loop makes up “eight”, “nine”, “ten” (“eleven” is ignored as this is the selector)) resulting in “eight”, “nine” ten”, “eleven”
    Total =7

  • TomB

    The key to this is to remember that the selector loops through each list item where the criteria is met one-at-a-time.

    1st list: siblings are for “one”, “two” and four” (“three” is ignored as this is the selector)
    2nd list: no siblings
    3rd list: it loops through this one twice as there is a class selector of “hilite” applied to 2 list elements (1st loop makes up “eight”,”ten”,”eleven” (“nine” is ignored as this is the selector), 2nd loop makes up “eight”, “nine”, “ten” (“eleven” is ignored as this is the selector)) resulting in “eight”, “nine” ten”, “eleven”
    Total =7

  • TomB

    The key to this is to remember that the selector loops through each list item where the criteria is met one-at-a-time.

    1st list: siblings are for “one”, “two” and four” (“three” is ignored as this is the selector)
    2nd list: no siblings
    3rd list: it loops through this one twice as there is a class selector of “hilite” applied to 2 list elements (1st loop makes up “eight”,”ten”,”eleven” (“nine” is ignored as this is the selector), 2nd loop makes up “eight”, “nine”, “ten” (“eleven” is ignored as this is the selector)) resulting in “eight”, “nine” ten”, “eleven”
    Total =7