JSFiddle - React, Tailwind, and code Playground

by Simplybj

JavaScript

$('.cRow').each(function(i, v) {
  let message = 'row started -->';
  let $this = $(this);
  let $shadedLayer = $this.find('>.editor-row-shaded-layer');
  let $Wrapper = $this.find(' >.editor-row-container');
  let $cGrid = $this.find('>.cGrid');

  if ($shadedLayer.length == 1) {
    message += 'shaded-layer started' + '-->';
    $Wrapper = $shadedLayer.find(' >.editor-row-container');
    $cGrid = $shadedLayer.find('>.cGrid');
  }
  if ($Wrapper.length == 1) {
    message += 'Wrapper started' + '-->';
    $cGrid = $Wrapper.find('>.cGrid');
  }
  message += 'cGrid started-->';
  console.log(message);
  $cGrid.find(' >.editor-col').each(function(i_, v_) {
    console.log('column started');
    let colElem = '';
    colElem = FindComponent($(this), '');
    console.log(colElem);
    console.log('column ended');
  });
  message = 'cGrid ended <--';
  if ($Wrapper.length == 1) {
    message += ' Wrapper ended <--';
  let $cGrid = $Wrapper.find('>.cGrid');
}
if ($shadedLayer.length == 1) {
  message += 'shaded-layer ended <--';
}
message += 'row ended <--';
//console.log(message);
});

function FindComponent($parent) {
  let $child = $parent.find('> .editor-component');
  if ($child.length > 0) {
    let $childElem = '';
    $child.each(function() {
      let $this = $(this);
      $childElem += '-->' + FindComponent($this);
    });
    return $childElem;
  } else
    return $parent.attr('data-type') + '--||';
}