jQuery不是为子元素准备的

Question

我试着用下拉菜单得到工作菜单。

我的任务：

我需要将span元素添加到第1级菜单项，下面的脚本不幸地将span元素添加到下拉选项中

菜单代码结构：

<li class="menu-item-1"><a href="#">Item1</a>
<li class="menu-item-2"><a href="#">Item2</a>    
<li class="menu-item-3">
  <a href="#">Item3</a>
  <ul class="sub-menu dropdown">
    <li class="menu-item-4"><a href="#">Subitem1</a></li>
    <li class="menu-item-4"><a href="#">Subitem1</a></li>
  </ul>
</li>

我的不合适的jQuery解决方案

$('.menu-item-552 a:not(.dropdown)').prepend('<span class="span-1"></span>');
$('.menu-item-553 a:not(.dropdown)').prepend('<span class="span-2"></span>');
$('.menu-item-561 a:not(.dropdown)').prepend('<span class="span-3"></span>');
$('.menu-item-559 a:not(.dropdown)').prepend('<span class="span-4"></span>');

Answer 1

仅用上述类指定元素的子元素--使用子选择器而不是子代选择器。

$('.menu-item-552 > a').prepend('<span class="span-1"></span>');

Answer 2

您使用not来过滤.dropdown的a元素，尽管它实际上是一个应用于ul的类

$('ul:not(.dropdown) .menu-item-552 a').prepend('<span class="span-1"></span>');