Select sibling at n distance from index (JavaScript)

Question

I'm looking for a way to traverse DOM element siblings like .nextSibling() allows, but at any given distance instead of the direct next sibling only.

For instance if I wanted to move 3 siblings over relative to my current node, I could do something like nextSibling(3) or siblings[2].

Any ideas on how to accomplish this without just looping nextSibling n number of times?

user_9298528 · Answer

You can use the parent.children array aswell as the Array.prototype.indexOf function.

function strideSiblings(element, stride){
  var parent = element.parentNode;
  var index = Array.prototype.indexOf.call(parent.children, element);
  return parent.children[index + stride];
}

var el = document.getElementById("div-3");
var stridedSibling = strideSiblings(el, -2);
var stridedSibling1 = strideSiblings(el, 1);

console.log(stridedSibling);
console.log(stridedSibling1);


Here is div-1
Here is div-2
Here is div-3
Here is div-4
Here is div-5

This answer builds on KhalilRavanna's contribution: https://stackoverflow.com/a/23528539/9298528

user_4830196 · Answer

I wanted to do some test runs of using previousSibling and nextSibling properties in a loop as opposed to using the accepted answer, I see no benefit from not using the built in node properties and a for loop, I am seeing a performance benefit in using the properties with a for loop as opposed to the accepted answer, here is my benchmarks with different amounts of siblings along with a jsfiddle for running more benchmarks - (https://jsfiddle.net/b196t7r3/), so in short, my answer is to use the solution that you were opposed to in your question, numbers below were received running the jsfiddle using - Chrome Version 88.0.4324.146 (Official Build) (64-bit):

100,000 siblings:

   Accepted answer execution time - 21.915000048466027 milliseconds
   Using properties with for loop - 8.234999957494438 milliseconds

10,000 siblings:

   Accepted answer execution time - 0.8149999775923789 milliseconds
   Using properties with for loop - 0.19500002963468432 milliseconds

1,000 siblings:

   Accepted answer execution time - 0.1800000318326056 milliseconds
   Using properties with for loop - 0.059999991208314896 milliseconds

EDIT: Added a code snippet here so that an external website is not necessary:

const numberOfSiblings = 100000; //Number of divs to append to parent
const startingElement = "div-3000"; //id of element we want to pass into functions
const strideNum = 2000; //Number of siblings away from the chosen starting point



function strideSiblings(element, stride){
    var parent = element.parentNode;
    var index = Array.prototype.indexOf.call(parent.children, element);
    return parent.children[index + stride];
}

function strideSiblingsWithPreviousOrNext(element, stride){
        let sib = null;
    
    if(stride > 0){
       for(let i = 0; i < stride; i++){
           sib = element.nextSibling;
           element = sib;
       }
    }else{
         stride = stride * -1;
         for(let j = 0; j < stride; j++){
            sib = element.previousSibling;
            element = sib;
       }
    }
    
    return sib;
}

let par = document.getElementById("parent"); //get the parent div

//append the number of siblings for benchmark testing
for(let v = 0; v < numberOfSiblings; v++){
    let newDiv = document.createElement("div");  
    newDiv.id = "div-" + v;
    newDiv.textContent = "Here is div-" + v;
    par.append(newDiv);
}

var el = document.getElementById(startingElement); //get the sibling to start from

var t0 = performance.now()
var stridedSibling = strideSiblings(el, strideNum);
var t1 = performance.now()
console.log("Call to strideSiblings() took " + (t1 - t0) + " milliseconds.");

var t2 = performance.now();
stridedSibling = strideSiblingsWithPreviousOrNext(el, strideNum);
var t3 = performance.now();
console.log("Call to strideSiblingsWithPreviousOrNext() took " + (t3 - t2) + " milliseconds.");

Select sibling at n distance from index (JavaScript)

2 Answers