如何将 span 包裹在 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 选择器而不仅仅是 后代选择器：

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

http://jsfiddle.net/dyev5/