如果有子菜单或子菜单，则将HTML元素添加到锚标记中

Question

我试过这个

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

但是所有的锚标记子菜单也都得到了相同的HTML元素

这是菜单结构

<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>


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

Answer 1

试试这个：

(function ($) {
  $(document).ready(function () {
    if ($("nav li.menu-item:has(ul)").length) {
      $("nav li.menu-item-has-children > a").append(
        '<span class="plus-minus">+</span>'
      );
    }
  });
})(jQuery);

Answer 2

这两行的语义都不正确：

if ($('nav li.menu-item-has-children:has(ul)'))

$()函数的返回值总是一个jQuery对象，因此条件总是计算为true。你可以这样做

if ($('nav li.menu-item-has-children:has(ul)').length)

但是坚持住因为这是不必要的。

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

将<span>元素追加到与选择器匹配的所有元素中。另一行中的:has()对该选择器没有影响。

我想你真正想要的是

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

没有if。它将选择所有作为nav li.menu-item-has-children:has(ul)后代的元素，并将<span>元素追加到它们。

Answer 3

因为您将span元素附加到li.menu-item-has-children类下的每个锚标记中。

您可以使用>选择器。

试着换掉这条线。

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