traverseDOM

by David McClelland

HTML

<div id="first">
  <div class="popup">
    <div class="widget-container">
      <div class="innerElement"></div>
    </div>
  </div>
</div>

<div id="second">
  <div class="widget-container">
    <div class="popup">
      <div class="innerElement"></div>
    </div>
  </div>
</div>

<div class="actionArea">
  <div>
    <button id="button1">first case</button>
    <br />
    <button id="button2">second case</button>
    <br />
  </div>
  <br />
  <textarea id="output" rows="2" value="output"></textarea>
</div>

JavaScript

// find elements
let $firstCase = $("#first");
let $secondCase = $("#second");
let $output = $(document.getElementById("output"));
let result;
let matches = ['popup', 'widget-container', 'folding-panel' ];
let possibleMatch;

button1.onclick = () => {
  doOperation1($firstCase);
}

button2.onclick = () => {
  doOperation1($secondCase);
}

function doOperation1($domObject) {
  let $startFrom = $domObject.find('.innerElement');

  do {
    possibleMatch = $startFrom.parent().attr('class');
    matches.forEach((matcher, i) => {
      if (matcher === possibleMatch) {
        result = matcher;
        return;
      }
    });
    if (result === undefined) {
      result = 'body';
    }
    $output.val(result);
  }
  while (result === undefined);
};