How to get an element’s siblings with vanilla JavaScript
Over the last few days, we’ve learned how to climb up the DOM and get parent elements in a variety of different ways.
Today, let’s look at how to get an element’s siblings.
For example, if you had a list item (an <li>
), how would you get get all the others in the list? jQuery makes this really easy with the siblings()
method.
But, with about 8 lines of code, we can easily create a vanilla JavaScript helper function that does the same thing.
Getting Setup
First, let’s create a helper function named getSiblings()
.
var getSiblings = function (elem) {
// Code goes here...
};
Now, let’s create an array that we’ll push each sibling element to.
var getSiblings = function (elem) {
var siblings = [];
};
Next, we want to grab the first sibling of our element. Using a list item as an example, we want to grab the first <li>
in the list that our list item belongs to.
We’ll do that using the .parentNode
property to get the parent list, and then the .firstChild
property to get the first item.
var getSiblings = function (elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
};
Getting all sibling elements
Now we’re ready to loop through each of our siblings and push them to our array.
We’ll use a for
loop for this. After each iteration of the loop, we’ll update our sibling
variable to point to the next sibling in the list using the nextSibling
property.
As long as a sibling
exists, we’ll keep looping through.
var getSiblings = function (elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for (; sibling; sibling = sibling.nextSibling) {
// Do something...
}
};
In our loop, we want to check if our current sibling
is our original elem
element. If it is, we’ll skip it.
We also want to make sure that the current sibling
is really an element and not a string of text or anything weird like that. We’ll use nodeType
to check that.
Otherwise, we’ll push our sibling
to the siblings
array.
var getSiblings = function (elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for (; sibling; sibling = sibling.nextSibling) {
if (sibling.nodeType !== 1 || sibling === elem) continue;
siblings.push(sibling);
}
};
And finally, when the loop is done, we’ll return it.
var getSiblings = function (elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for (; sibling; sibling = sibling.nextSibling) {
if (sibling.nodeType !== 1 || sibling === elem) continue;
siblings.push(sibling);
}
return siblings;
};
You would use it like this:
var elem = document.querySelector('#some-element');
var siblings = getSiblings(elem);
You can also download this helper function on GitHub.