jQuery：如何获取子菜单的子菜单？答案

【问题标题】：jQuery: how to get the sub-menus of sub-menu?jQuery：如何获取子菜单的子菜单？
【发布时间】：2018-04-16 15:48:11
【问题描述】：

我有一个 HTML 菜单，它有父菜单、子菜单，在每个子菜单下，可能还有其他子菜单等...

现在，我需要向具有子菜单的父菜单和子菜单添加一个图标（栏）。并且这个图标添加过程也应该适用于具有其他子菜单的子菜单！我希望这是有道理的。

目前，使用下面的代码，我可以将图标添加到具有子菜单的父菜单，但这似乎不适用于具有子菜单的子菜单！

每个元素都有相同的类名 .MyLi 所以我不明白为什么它只将图标添加到父菜单而不是子菜单。

这是我的代码：

这是我使用的 jQuery 代码：

$('.MyLi:has(ul)').each(function () {
  $(this).html($(this).html()+' <i style="position:absolute; top:0; right:20px;font-size:20px;" class="fa fa-bars mybars" aria-hidden="true"></i>');
 });

有人可以就这个问题提出建议吗？

【问题讨论】：

标签： jquery css

【解决方案1】：

如果我正确理解您的问题和要求，这可能是您尝试做的事情？

我更改了position 和left 的样式，将图标放在<li> 的前面。但是，最好给图标添加一个类并在该类中控制 CSS。

$('.MyLi:has(ul)').each(function() {
  $(this).prepend('<i style="position:relative; top:0; left:0px;font-size:20px;" class="fa fa-bars mybars" aria-hidden="true"></i>');
});

.MyLi {
  color: grey;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="MyLi Home" data-cont="Home" id="2"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Home</a>
  <ul>
    <li class="MyLi Management Policies" data-cont="Management Policies" id="52"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Management Policies</a>
      <ul>
        <li class="MyLi Abuse" data-cont="Abuse" id="87"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Abuse</a></li>
        <li class="MyLi Communication" data-cont="Communication" id="89"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Communication</a></li>
        <li class="MyLi Confidentiality" data-cont="Confidentiality" id="97"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Confidentiality</a></li>
        <li class="MyLi Food and Drink" data-cont="Food and Drink" id="95"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Food and Drink</a></li>
        <li class="MyLi Health and Safety" data-cont="Health and Safety" id="91"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Health and Safety</a></li>
        <li class="MyLi Moving and Handling" data-cont="Moving and Handling" id="93"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Moving and Handling</a></li>
        <li class="MyLi Worksheet" data-cont="Worksheet" id="99"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Worksheet</a></li>
      </ul>
    </li>
    <li class="MyLi Mental Health" data-cont="Mental Health" id="54"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Mental Health</a>
      <ul>
        <li class="MyLi Aggression and Abuse" data-cont="Aggression and Abuse" id="109"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Aggression and Abuse</a></li>
        <li class="MyLi Game" data-cont="Game" id="973"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Game</a></li>
        <li class="MyLi Health Assessments" data-cont="Health Assessments" id="101"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Health Assessments</a></li>
        <li class="MyLi Medications" data-cont="Medications" id="112"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Medications</a></li>
        <li class="MyLi Mental Disorders" data-cont="Mental Disorders" id="105"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Mental Disorders</a></li>
        <li class="MyLi Other Articles" data-cont="Other Articles" id="114"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Other Articles</a></li>
      </ul>
    </li>
    <li class="MyLi Quality Assurance" data-cont="Quality Assurance" id="47"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Quality Assurance</a></li>
  </ul>
</li>

【讨论】：