JSFiddle - React, Tailwind, and code Playground

Setting up idisplay - recurse tree

by Ben Clayton

HTML

<div class="controller" data-idisplay-conf="X">


  <div class="scene-a0">
    <div class="embed_idisplay_object" data-idisplay-conf="X">
      <div class="scene-a0-s0">
        <div class="embed_idisplay_object" data-idisplay-conf="X">
        </div>
      </div>
    </div>

    <div class="group">
      <div class="scene-a0-s1">
        <div class="embed_idisplay_object" data-idisplay-conf="X">
        </div>
      </div>
    </div>

  </div>
  <div class="scene-a1">
    <div class="embed_idisplay_object" data-idisplay-conf="X">
    </div>
  </div>
  <div class="scene-a2">
    <div class="embed_idisplay_object" data-idisplay-conf="X">
    </div>
  </div>

</div>

JavaScript

nodes = [];

// idisplay class
function idisplay() {
  this.parent = null;
  this.selector = "";
}


function recurse(parent_idisp,sel, elm, cls,parent_idx) {
  console.log($(elm).attr('class'));

  if ($(elm).data('idisplay-conf')) {
    var idisp = new idisplay();
    idisp.selector = sel;
    $(elm).addClass(cls);
    idisp.parent = parent_idisp;
    nodes.push(idisp);
    $(elm).children().each(function(idx, child) {
      recurse(idisp,sel, child, cls + '-' + parent_idx,idx);
    });
  } else {
    $(elm).children().each(function(idx, child) {
      recurse(parent_idisp,sel, child, cls,parent_idx);
    });
  }

}

recurse(null, "scene",".controller", "n")