如何在ul li周围包裹但不在Child ul中？

Question

我如何仅影响ul.menu li a元素，而不影响子元素（ul.submenu li a）？

这是我的代码：

$('ul.menu li a').wrap('<span></span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="#">I want the span</a></li>
  <li><a href="#">I want the span</a>
    <ul class="submenu">
      <li><a href="#">Don't want the span</a></li>
      <li><a href="#">Don't want the span</a></li>
      <li><a href="#">Don't want the span</a></li>
    </ul>
  </li>
  <li><a href="#">I want the span</a></li>
  <li><a href="#">I want the span</a></li>
</ul>

Answer 1

您应该使用child选择器而不仅仅是descendant选择器：

$('ul.menu > li > a').wrap('<span></span>');

http://jsfiddle.net/dyev5/