JSFiddle - React, Tailwind, and code Playground

by Paco86

HTML

<div id="a">
  a
  <div id="b">
    b
    <div id="c">c</div>
  </div>
  <div id="d">
    d
    <div id="e">e</div>
    <div id="f">
      f
      <div id="g">
        g
        <div id="h">h</div>
      </div>
      <div id="i">
        i
        <div id="j">j</div>
      </div>
    </div>
  </div>
</div>

CSS

div {
	padding: 20px;
	border: 1px solid black;
}

.child {
	background-color: rgba(255, 0, 0, .2);
}

.ancestor {
	background-color: rgba(0, 255, 0, .2);
}

JavaScript

var NODE_1 = 'h';
var NODE_2 = 'j';

var node1 = document.getElementById(NODE_1);
var node2 = document.getElementById(NODE_2);

node1.classList.add('child');
node2.classList.add('child');

var getAncestor = function(node1, node2) {
  // fill in implementation here.

  // var runner1 = node1;
  // var runner2 = node2;
  // while(runner1){
  //     while(runner2){
  //         if(runner1.id === runner2.id){
  //             if(runner2.id === node2.id ){
  //                 return runner2.parentNode;
  //             }else if(runner1.id === node1.id){
  //                 return runner1.parentNode;
  //             }else{
  //                 return runner1;
  //             }
  //
  //         }
  //         runner2 = runner2.parentNode;
  //     }
  //     runner2 = node2;
  //     runner1 = runner1.parentNode;
  // }

    var parents1 = parents(node1);
    var parents2 = parents(node2);

    for (var i = 0; i < parents1.length; i++) {
        if(node1.id === parents1[i].id){
            return node1.parentNode;
        }else if(node2.id === parents2[i].id){
            return node2.parentNode;
        }else if (parents1[i].id !== parents2[i].id) {
            return parents1[i - 1];
      }
    }

};

function parents(node) {
  var nodes = [node];
  while(node){
      nodes.unshift(node);
      node = node.parentNode;
  }
  return nodes;
}

getAncestor(node1, node2).classList.add('ancestor');