JSFiddle - React, Tailwind, and code Playground

by criptkiller

HTML

<link rel="stylesheet" href="http://t.profebox.com/css/core.css">
<div class="ulList">
    <ul class="ul_romano">
      <li>
          <img src="../images/setaListESQ.png" class="icon down" /><img src=
      "../images/setaListDIR.png" class="icon up" />
          <input type="text" value=
      "numera&Atilde;&sect;&Atilde;&pound;o romana" /><img src="images/plusBlack.png"
      class="icon maisUm" /><img src="images/menos.png" class="icon menosUm" />
     </li>

      <li style="list-style: none; display: inline">
        <ul class="ul_normal">
          <li><img src="../images/setaListESQ.png" class="icon down" /><img src=
          "../images/setaListDIR.png" class="icon up" /><input type="text" value=
          "um" /><img src="images/plusBlack.png" class="icon maisUm" /><img src=
          "images/menos.png" class="icon menosUm" /></li>

          <li><img src="../images/setaListESQ.png" class="icon down" /><img src=
          "../images/setaListDIR.png" class="icon up" /><input type="text" value=
          "dois" /><img src="images/plusBlack.png" class="icon maisUm" /><img src=
          "images/menos.png" class="icon menosUm" /></li>

          <li><img src="../images/setaListESQ.png" class="icon down" /><img src=
          "../images/setaListDIR.png" class="icon up" /><input type="text" value=
          "tr&Atilde;&ordf;s" /><img src="images/plusBlack.png" class=
          "icon maisUm" /><img src="images/menos.png" class="icon menosUm" /></li>
        </ul>
      </li>

      <li><img src="../images/setaListESQ.png" class="icon down" /><img src=
      "../images/setaListDIR.png" class="icon up" /><input type="text" value=
      "Outra numerac&Atilde;&sect;&Atilde;&pound;o" /><img src="images/plusBlack.png"
      class="icon maisUm" /><img src="images/menos.png" class="icon menosUm" /></li>

      <li style="list-style: none; display: inline">
        <ul class="ul_normal">
          <li><img src="../images/setaListESQ.png" class="icon down" /><img src=
...

JavaScript

var $ulList = $(".ulList");

function isLevelOne ( $obj ){
    console.debug(' ---- isLevelOne ----');
    console.debug($obj);
    console.debug(' ---- FIM ---- ');
    return isRoot($obj.parent().parent());
}

function isRoot ( $obj ){
    console.debug(' ---- isRoot ----');
    console.debug($obj);
    console.debug(' ---- FIM ---- ');
    return $obj.parent().parent().hasClass('ulList');
}

function moreThanOneLevel ( $obj ){
    console.debug(' ---- moreThanOneLevel ----');
    console.debug($obj);
    console.debug(' ---- FIM ---- ');
    return $obj.find("ul").size()>0;
}

function isIgnoreList ( $obj ){
    if($obj.get(0).tagName == 'LI' && $obj.find("ul").size()>0){
        return true; 
    }  
    return false;
}




$ulList.find("li").each(function (){
    
    var $this = $(this);
    
    if(isIgnoreList($this)){
        $this.css('border','1px solid purpled');
    }else if(isRoot($this)){
        $this.css('border','1px solid red');

    }else if(isLevelOne($this)){
        $this.css('border','1px solid blue');
    }else if(moreThanOneLevel($this)){
        $this.css('border','1px solid yellow');
    }
    
    
    
    
    
    
});