使用jQuery实现 嵌套多层ul时，鼠标滑过某个li，该li变颜色

 使用css的  :hover  是实现不了 li 里面还嵌套ul的样式，左图是写ul li:hover实现的效果图；

现在使用jquery来实现（左图是效果图）

                      

<style>
    ul li {
        line-height: 36px;
    }
        
    .color {
        color: #00f;
    }
</style>
<ul class="parent">
   <li class="li">000</li>
   <li>
       <ul class="child">
           <li>111</li>
           <li>222</li>
           <li>333</li>
       </ul>
   </li>
   <li class="li">
       <ul class="child">
           <li>444</li>
           <li>555</li>
           <li>666</li>
       </ul>
   </li>
</ul>

<script>
    $("ul li").hover(function() {
        var child = $(this).children();// 获取鼠标滑过的li里面有没有子元素
        if (child.length == 0) {// 当获取的子元素的长度为0时，再给该li添加样式
            var t = $(this).text();
            $("ul li").removeClass("color");
            $(this).addClass("color");
        }
    })
</script>