javascripthtmldomsiblings

Is there a way to select sibling nodes?

For some performance reasons, I am trying to find a way to select only sibling nodes of the selected node.

For example,

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
  <div id="inner3"></div>
  <div id="inner4"></div>
</div>

If I selected inner1 node, is there a way for me to access its siblings, inner2-4 nodes?

Solution

  • Well... sure... just access the parent and then the children.

     node.parentNode.childNodes[]

    or... using jQuery:

    $('#innerId').siblings()

    Edit: Cletus as always is inspiring. I dug further. This is how jQuery gets siblings essentially: 

    function getChildren(n, skipMe){
    var r = [];
    for ( ; n; n = n.nextSibling ) 
       if ( n.nodeType == 1 && n != skipMe)
          r.push( n );        
    return r;
};

function getSiblings(n) {
    return getChildren(n.parentNode.firstChild, n);
}