sevenLee
10/25/2016 - 4:29 PM

jQuery base, Find the specify the DOM Element max depth.

jQuery base, Find the specify the DOM Element max depth.

$(function(){
  function findLev1(domAll, tag, cb) {
    $.each(domAll, function(key, elm){
      var depth = 0
      if(elm.tagName === tag){
        depth++
        cb(depth);
        if(elm.childNodes.length > 0){
          findNestLev(elm.childNodes, tag, depth, cb);
        }
      }

      if(elm.childNodes.length > 0){
        findNestLev(elm.childNodes, tag, depth, cb);
      }
    });
  }

  function findNestLev(all, tag, depth, cb) {
    console.log('all:', all);
    $.each(all, function(key, elm){
      if(elm.tagName === tag){
        depth++
        cb(depth);
        if(elm.childNodes.length > 0){
          findNestLev(elm.childNodes, tag, depth, cb);
        }
      }
      if(elm.childNodes.length > 0){
        findNestLev(elm.childNodes, tag, depth, cb);
      }
    });
  }

  function elmLevel(strHtml, tag) {
    var domAll = $.parseHTML($.trim(strHtml));
    var depthMax = 0

    tag = tag.toUpperCase();
    findLev1(domAll, tag, function(depth){
      if(depth > depthMax) depthMax = depth;
    });

    return depthMax;
  }

  var strHtml = `<ul>
                  <li>
                    <span></span><a></a>
                    <ul>
                      <li>
                        <ul>
                          <li>
                            <ul >
                              <a></a>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul>
                  <li>
                    <b></b>
                  </li>
                </ul>
                `

  var depthMax = elmLevel(strHtml, 'ul');
  console.log('depthMax:', depthMax);
});