JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div data-item-type="dropdownlist" data-item-id="1" data-item-parent-id="0" data-item-name="dropdown1">-</div>
<div data-item-type="dropdownlist" data-item-id="2" data-item-parent-id="0" data-item-name="dropdown2">-</div>
<div data-item-type="panel" data-item-id="3" data-item-parent-id="0" data-item-name="panel1">
  <div class="padding-box">
    <div data-item-type="checkbox" data-item-id="4" data-item-parent-id="3" data-item-name="checkbox1">-</div>
    <div data-item-type="checkbox" data-item-id="5" data-item-parent-id="3" data-item-name="checkbox2">-</div>
    <div data-item-type="dropdownlist" data-item-id="6" data-item-parent-id="3" data-item-name="dropdown3">-</div>
  </div>
</div>

JavaScript

// <div class="example" data-item-type="dropdownlist">-</div>


function selectAll(selector, context) {
  if ( typeof context === "string" ) {
    context = document.querySelector( context );
    if ( context === null  ) console.log('%cMake sure the %cPARENT %cselector is correct!: %c' + selector, 'font-weight: bold;', 'color: red;', 'font-weight: bold;', 'color: red;');
  }
  var element = (context || document).querySelectorAll(selector);
  if ( element === null  ) console.log('%cMake sure the %cCHILD %cselector is correct!: %c' + selector, 'font-weight: bold;', 'color: red;', 'font-weight: bold;', 'color: red;');
  return [...element];
}
function select(selector, context) {
  if ( typeof context === "string" ) {
    context = document.querySelector( context );
    if ( context === null  ) console.log('%cMake sure the %cPARENT %cselector is correct!: %c' + selector, 'font-weight: bold;', 'color: red;', 'font-weight: bold;', 'color: red;');
  }
  var element = (context || document).querySelector(selector);
  if ( element === null  ) console.log('%cMake sure the %cCHILD %cselector is correct!: %c' + selector, 'font-weight: bold;', 'color: red;', 'font-weight: bold;', 'color: red;');
  return element;
}
function elementAll(selector, context) {
  return selectAll( selector, context );
}
function element(selector, context) {
  return select( selector, context );
}
function pickAll(selector, context) {
  return selectAll( selector, context );
}
function pick(selector, context) {
  return select( selector, context );
}

var t = {
  elementGetter: function( child, parent, childType, all ) {
    var parentSelector = '';
    if ( parent ) {
      var type = '';
      if ( typeof parent == "string" ) type = 'name';
      if ( typeof parent == "number" ) type = 'id';
      parentSelector = '[data-item-'+ type +'="'+ parent +'"] > .padding-box > ';
    }
    if ( all ) {
      return selectAll( parentSelector + '[data-item-'+ childType +'="'+ child +'"]');
    }
    else {
 ...