How to find all Siblings of the currently selected DOM object

Question

What is the perfect way to find all nextSiblings and previousSiblings in JavaScript. I tried few ways but not getting accurate solution. If any element is selected, I need to get length of all next siblings excluding white-space, any spaces or line-breaks.

Also I don't want to use jQuery for this. I am specifically looking something from JavaScript

Answer 1

This is a bit more winded of a solution but allows you to create a filter on how you get siblings.

There are three functions to get only previous, only next, or all. This could be improved but decent starting point if you need more control on what types of siblings you want to collect. Thought it might be worth adding.

Working Example

get all next siblings

//this will start from the current element and get all of the next siblings  function getNextSiblings(elem, filter) {     var sibs = [];     while (elem = elem.nextSibling) {         if (elem.nodeType === 3) continue; // text node         if (!filter || filter(elem)) sibs.push(elem);     }     return sibs; } 

get all previous siblings

//this will start from the current element and get all the previous siblings  function getPreviousSiblings(elem, filter) {     var sibs = [];     while (elem = elem.previousSibling) {         if (elem.nodeType === 3) continue; // text node         if (!filter || filter(elem)) sibs.push(elem);     }     return sibs; } 

get all siblings

//this will start from the first child of the current element's parent and get all the siblings  function getAllSiblings(elem, filter) {     var sibs = [];     elem = elem.parentNode.firstChild;     do {         if (elem.nodeType === 3) continue; // text node         if (!filter || filter(elem)) sibs.push(elem);     } while (elem = elem.nextSibling)     return sibs; } 

example filter to apply to above functions

// Example filter only counts divs and spans but could be made more complex function exampleFilter(elem) {     switch (elem.nodeName.toUpperCase()) {         case 'DIV':             return true;         case 'SPAN':             return true;         default:             return false;     } } 

HTML and testing output

HTML

<div id='test'>     <div id='test2'>asdf</div>     <br /> sdf     <div>asdfasdf<span>asdf</span></div>     <div>a</div>     <span>a</span>     <br />     <div>d</div>     <hr/> </div> 

JavaScript

var elem; elem = document.getElementById('test2');  //with filter alerts 4 alert( getNextSiblings( elem, exampleFilter ).length );  // no filter, alerts 7 elem = document.getElementById('test2');// put elem back to what it was alert( getNextSiblings( elem ).length );  // alerts 0 elem = document.getElementById('test2');// put elem back to what it was alert( getPreviousSiblings( elem, exampleFilter ).length );  // alerts 5 elem = document.getElementById('test2');// put elem back to what it was alert( getAllSiblings( elem, exampleFilter ).length ); 

Answer 2

I'll assume that this takes place inside an event handler where this is a reference to the targeted element whose siblings you want to affect.

If not, adjustments will be needed.

var result = [],     node = this.parentNode.firstChild;  while ( node ) {     if ( node !== this && node.nodeType === Node.ELEMENT_NODE )        result.push( node );     node = node.nextElementSibling || node.nextSibling; }  // result will contain all type 1 siblings of "this"