Javascript find sibling with class

Get the next, previous or all siblings of an element or retrieve siblings that match a given selector.


A helper function for fetching all siblings for a given DOM element -  or a filtered set of them:

function getSiblings(el, filter) {
var siblings = [];
el = el.parentNode.firstChild;
do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
return siblings;
}

// example filter function
function exampleFilter(el) {
return elem.nodeName.toLowerCase() == 'a';
}

// usage
el = document.querySelector('div');
// get all siblings of el
var sibs = getSiblings(el);
// get only anchor element siblings of el
var sibs_a = getSiblings(el, exampleFilter);

There are faster DOM methods for only getting the previous or next sibling of an element:

var previous = el.previousSibling;
var next = el.nextSibling;

Get all following siblings of an element, optionally filtered:

// this helper accepts a filter function as shown above: "exampleFilter()"
function getNextSiblings(el, filter) {
var siblings = [];
while (el= el.nextSibling) { if (!filter || filter(el)) siblings.push(el); }
return siblings;
}

Get all preceding siblings of an element, optionally filtered:

// this helper accepts a filter function as shown above: "exampleFilter()"
function getPreviousSiblings(el, filter) {
var siblings = [];
while (el = el.previousSibling) { if (!filter || filter(el)) siblings.push(el); }
return siblings;
}

Sources

http://stackoverflow.com/questions/4378784/


Feedback

The read-only nextSibling property of the Node interface returns the node immediately following the specified one in their parent's childNodes, or returns null if the specified node is the last child in the parent element.

Note: Browsers insert Text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get.

The article Whitespace in the DOM contains more information about this behavior.

You can use Element.nextElementSibling to obtain the next element skipping any whitespace nodes, other between-element text, or comments.

To navigate the opposite way through the child nodes list use Node.previousSibling.

Value

A Node representing the next sibling of the current node, or null if there are none.

Example

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<br />
<output><em>Not calculated.</em></output>

let el = document.getElementById("div-1").nextSibling;
let i = 1;

let result = "Siblings of div-1:<br/>";

while (el) {
  result += `${i}. ${el.nodeName}<br/>`;
  el = el.nextSibling;
  i++;
}

const output = document.querySelector("output");
output.innerHTML = result;

Specifications

Specification
DOM Standard
# ref-for-dom-node-nextsiblingâ‘ 

Browser compatibility

BCD tables only load in the browser

See also

How do I get siblings in Javascript?

To get all siblings of an element, we'll use the logic:.
First, select the parent of the element whose siblings that you want to find..
Second, select the first child element of that parent element..
Third, add the first element to an array of siblings..
Fourth, select the next sibling of the first element..

What is sibling in Javascript?

Siblings are nodes with the same parent (in the same childNodes list). Element Siblings are elements with the same parent (in the same children list).

How do I get next element in DOM?

The article Whitespace in the DOM contains more information about this behavior. You can use Element. nextElementSibling to obtain the next element skipping any whitespace nodes, other between-element text, or comments. To navigate the opposite way through the child nodes list use Node.

Is used to select all the siblings of an element?

To select all sibling elements of an element, we will use siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same parent element in DOM Tree.