JSFiddle - React, Tailwind, and code Playground

by Shah Danial

HTML

<section id="post-editor">
  <div class="para">
  Level 1
      <div class="para">
          <div class="para">
          Level 3
              <div class="para">
              Level 4
              </div>
          </div>
      </div>
  </div>
  
  
  <div class="para">
  LEBEL 1
      <div class="para">
          <div class="para">
          LEBEL 3
              <div class="para">
              LEBEL 4
              </div>
          </div>
      </div>
  </div>
</section>
<button id="jalan">
TRY IT
</button>

JavaScript

document.getElementById('jalan').addEventListener('click', function(){

var
    editor = document.getElementById("post-editor"),
    editorPara = editor.getElementsByClassName('para');

if (editorPara) {
console.log(editorPara.length);
    for (var i = 0; i < editorPara.length; i++) {
        cubaan = 0;
        
                // something
                if( get_wrapper(editorPara[i], 'class', 'para') && cubaan < 10 ){								
                		
                		console.log(editorPara[i]);
                    cubaan = parseFloat(cuba) + parseFloat(1);
            		}
    }
}

});







function get_wrapper(a, attr, valu) {
    /*get_wrapper(a, 'class', 'wrapper22')
   if(get_wrapper(a, 'class', 'wrapper22').getAttribute('id') ){//if this attribute is available.
   #ex to use it: get_wrapper(a, 'class', 'wrapper22') .getAttribute('id');
} else {
#do something
}
*/
    var vall = ' ' + valu + ' ';
    var c = false;
    var w = a;
    while (a && !c) {
        if (a != w) {
            if (a.nodeType === 1 && a.getAttribute(attr)) {
                var get_attr = ' ' + a.getAttribute(attr) + ' ';
                if (get_attr.indexOf(vall) > -1) {
                    return a;
                    c = true; // stop while.
                }
            }
        }
        a = a.parentNode;
    }
    if (!c) { // jika element takde.
        return false;
    }

}