jQuery动态向嵌套列表项添加类，以标记具有子节点的菜单

下面的标记是一个动态生成的菜单示例，该菜单使用css作为弹出按钮进行样式设置。我只是想添加箭头来显示菜单中有子菜单的位置

是否可以通过jQuery向具有子菜单的顶级元素添加一个类（“hasChild top”），向具有子菜单的低级元素添加一个类（“hasChild sub”）呢

<ul id="menu-site-menu">
    <li"><a href="#">About Us</a>
        <ul class="sub-menu">
            <li><a href="#">Our Charity Partners</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </li>
    <li><a href="#">Buy Apparel</a>
        <ul class="sub-menu">
            <li><a href="#">Benevolent Elephant</a>
                <ul class="sub-menu">
                    <li><a href="#">Benevolent Elephant Short Sleeve</a></li>
                    <li><a href="#">Benevolent Elephant Long Sleeve</a></li>
                </ul>
            </li>
            <li><a href="#">Eagle-Spirit</a>
                <ul class="sub-menu">
                    <li><a href="#">Eagle-Spirit Short Sleeve</a></li>
                    <li><a href="#">Eagle-Spirit Long Sleeve T-Shirts</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Customer Service</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

像这样的东西可能很管用

$('ul.nav.menu > li').each(function (index) {
    if ($(this).find('ul').length > 0) $(this).addClass('hasChild').addClass('top');
});

$('ul.nav.menu > li > ul > li').each(function (index) {
    if ($(this).find('ul').length > 0) $(this).addClass('hasChild').addClass('sub');
});

也就是说，找到作为顶级ul的直接后代的li元素，然后使用将其缩小为仅包含子ul的元素。给他们上“hasChild top”课程。然后，在这些顶级菜单中，与
.has（）
结合使用，以获取所有较低级别的菜单（无论嵌套有多深），并为它们提供“hasChild子”类。
不确定这是否是最好的jquery，但这应该可以做到：

  $('.menu > li').each(function() {
        var childMenu = $(this).find('ul');
        if (childMenu.length > 0) {
            $(this).addClass('hasChild top');

            var subMenuChild = $('.hasChild.top > ul > li');
            $(subMenuChild).each(function() {
                var subMenuChildMenu = $(this).find('ul');
                if (subMenuChildMenu.length > 0) {
                    $(this).addClass('hasChild sub');
                }
            });
        }
    }); 

我有一个类似的问题，我想我的答案就在这里

首先，我有一个弹出式嵌套列表，从托管服务输出为.hasChildren。
因此，我只能向UL添加类，这些类工作得很好

$('ul.nav.menu > li').each(function (index) {
    if ($(this).find('ul').length > 0) $(this).addClass('hasChild').addClass('top');
});

$('ul.nav.menu > li > ul > li').each(function (index) {
    if ($(this).find('ul').length > 0) $(this).addClass('hasChild').addClass('sub');
});

我想做的是在.hasChildren中添加一个span类（而不是添加一个类）
我已经尝试了上面的一些代码，它不断地将span类追加到列表的末尾-请参见下面粗体显示的我想要实现的目标

最初我是这样想的

$(document).ready(function()
{
$('li.hasChildren a').first().append('<span class="arrow"></span>');

$（文档）.ready（函数（）
{
$（'li.hasa'）.first（）.append（“”）；

$（'ul li.hasa'）.first（）.append（“”）；
    });

它可以工作，但我有嵌套列表，一些列表会在不同的时间有多个嵌套，因为网站可以由客户在CMS上的管理员动态添加页面-所以我不能只使用。首先

这就是我想要实现的目标

<li class="hasChildren"><a href="/about-us" class="">About Us<span class="arrow"></span></a></li>



以下是CMS输出的代码：

<ul class="globalMenu sf-menu responsive-menu sf-js-enabled">
   <li class="selectedPage"><a href="/" class="selectedPage">Home</a></li>
   <li class="hasChildren"><a href="/about-us" class="">About Us</a>
         <ul class="level2" style="display: none;">
                 <li><a href="/our-team">Our Team</a></li>
                 <li class="hasChildren"><a href="/campaigns" class="">Campaigns</a>
                          <ul class="level3" style="display: none;">
                                   <li><a href="/beat-poverty">Beat Poverty</a></li>
                         </ul>
                  </li>
          </ul>
    </li>
<li><a href="/events">Events</a></li>
<li><a href="/how-to-help">how to help</a></li>

















附言。
我喜欢长度，因为页面结构可以随时改变。
CK

更新：

浏览了上面所有的代码，这就是我想出的有效方法。
唯一好的方法是通过所有嵌套列表进行计数，而不是继续为每个列表添加另一个列表（或用逗号分隔）。让我知道是否有更简单的方法，或者这是我制定的最简单的方法

$('ul.globalMenu > li.hasChildren > a').append('<span class="arrow"></span>');

$（'ul.globalMenu>li.haschilds>a'）。追加（“”）；

$（'ul.globalMenu>li.haschilds-ul-li.haschilds>a'）。追加（''；
    
addClass（）
可以通过用空格分隔两个类来同时设置这两个类
addClass（'hasChild top'）
。不错，但NNNN的解决方案似乎要好得多。：）我将仔细查看.has（），它可能非常有用。
$（“ul.nav.menu>li”）.has（“ul”）.addClass（“hasChild top”）.find（“li”）.has（“ul”）.addClass（“hasChild sub”）做同样的事情：）@Stefan-当然！我早该知道的。也就是说，我确实知道，但最初没有想到。哎呀。谢谢你做了jsFiddle.+1。看起来很棒。现在就开始测试。Stefan的快捷方式也是+1。
$('ul.globalMenu > li.hasChildren > a').append('<span class="arrow"></span>');