如何为含子菜单的锚点标签添加HTML元素且避免子菜单锚点受影响

问题描述 #

需要为包含子菜单的<li class="menu-item-has-children">下的直接<a>标签添加<span class="plus-minus">+</span>元素，但使用以下jQuery代码时，子菜单内的所有<a>标签也被误添加了该元素：

if ($('nav li.menu-item-has-children:has(ul)'))
$('nav li.menu-item-has-children a').append("<span class=\"plus-minus\">+</span>");

当前菜单结构 #

<ul id="primary-menu" class="menu">
  <li class="menu-item "><a href="home/">Home</a></li>
  <li class="menu-item" ><a href="about">About <span class="plus-minus">+</span></a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="basics/">Basic</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="products" aria-current="page">Products</a>
    <ul class="sub-menu">
      <li  class="menu-item"><a href="Product-1">Product-1</a></li>
      <li  class="menu-item "><a href="Product-2">Product-2</a></li>
      <li  class="menu-item "><a href="Product-3">Product-3</a></li>
      <li  class="menu-item "><a href="Product-4">Product-4</a></li>
      <li  class="menu-item "><a href="Product-5">Product-5</a></li>
      <li  class="menu-item "><a href="Product-6">Product-6</a></li>
    </ul>
  </li>
  <li  class="menu-item"><a href="contact-us/">Contact Us</a></li>
</ul>

期望实现的菜单结构 #

<ul id="primary-menu" class="menu">
  <li class="menu-item "><a href="home/">Home</a></li>
  <li class="menu-item" ><a href="about">About <span class="plus-minus">+</span> </a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="basics/">Basic</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="products" aria-current="page">Products <span class="plus-minus">+</span></a>
    <ul class="sub-menu">
      <li  class="menu-item"><a href="Product-1">Product-1</a></li>
      <li  class="menu-item "><a href="Product-2">Product-2</a></li>
      <li  class="menu-item "><a href="Product-3">Product-3</a></li>
      <li  class="menu-item "><a href="Product-4">Product-4</a></li>
      <li  class="menu-item "><a href="Product-5">Product-5</a></li>
      <li  class="menu-item "><a href="Product-6">Product-6</a></li>
    </ul>
  </li>
  <li  class="menu-item"><a href="contact-us/">Contact Us</a></li>
</ul>

解决方案 #

使用**直接子选择器>**精准定位目标元素，仅匹配menu-item-has-children类<li>下的直接子<a>标签，避免选中子菜单内的后代<a>：

// 仅为带子女菜单的父级li下的直接a标签添加元素
$('nav li.menu-item-has-children > a').append('<span class="plus-minus">+</span>');

代码说明 #

• 原代码中nav li.menu-item-has-children a会选中该<li>下的所有后代<a>（包括子菜单内的），添加>后，仅匹配<li>的直接子元素<a>。
• 无需额外if判断，jQuery选择器会自动过滤符合条件的元素，无匹配项时不会执行后续操作。

内容的提问来源于stack exchange，提问作者Mahendra Kumbhar