JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div>
  <p>
    First div
  </p>
  <div>
    <p>
      First child of first div
    </p>
    <!-- Comment here -->
    <div>
      <p>
        First child of first child
      </p>
    </div>
    <div id="my-div">
      <p>
        Second child of first child
      </p>
    </div>
    <div>
      <p>
        Third child of first child
      </p>
    </div>
  </div>
  <div>
    <p>
      Second child of first div
    </p>
  </div>
</div>

CSS

div > div {
  padding-left: 50px;
}

JavaScript

function getNodeIndexPositions(node) {
  var indexArray = [];

  function getNodeData(node) {
    var index = 0;
    var lastNode;

    while (node) {
    	node = node.previousSibling;

      if (node && node.nodeType != 3 && node.nodeType != 8) {
        lastNode = node;
        
        index++;
      }
    }

    indexArray.unshift(index);

    if (lastNode && lastNode.parentNode && lastNode.parentNode !== document.body) {
      return getNodeData(lastNode.parentNode);
    }

    return indexArray;
  }

  return getNodeData(node);
}

var element = document.querySelector('#my-div');
var indexArr = getNodeIndexPositions(element);

console.log(indexArr);