siblings()

.siblings( [ selector ])

Returns: jQuery

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

.siblings( [ selector ] )

version added: 1.0

selector

A 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 1

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

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

The output of the code above will be:

Try it yourself

Example 1 - Full source:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    var len = $(".hilite").siblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);

  });
  </script>

  <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>
</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>

</body>
</html>

Try it yourself

Example 2

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

$("p").siblings(".selected").css("background", "yellow");

The output of the code above will be:

Try it yourself

Example 2 - Full source:

<!DOCTYPE html>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("p").siblings(".selected").css("background", "yellow");
  });
  </script>

  
</head>
<body>
  <div><span>Hello</span></div>

  <p class="selected">Hello Again</p>

  <p>And Again</p>
</body>
</html>

Try it yourself

Was this information helpful?

Yes No

siblings()

.siblings( [ selector ])

.siblings( [ selector ] )

Examples

Example 1

Example 1 - Full source:

Example 2

Example 2 - Full source:

Comments