Add a HTML element to the anchor tag if has child or sub menu-CodePudding

I tried this

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

but all the anchor tags child menus are also getting the same HTML element Added

this is the menu structute

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

i want it to be

<ul id="primary-menu" >
  <li ><a href="home/">Home</a></li>
  <li  ><a href="about">About <span class=\"plus-minus\"> </span> </a>
    <ul >
      <li ><a href="basics/">Basic</a></li>
    </ul>
  </li>
  <li ><a href="products" aria-current="page">Products <span class=\"plus-minus\"> </span></a>
    <ul >
      <li  ><a href="Product-1">Product-1</a></li>
      <li  ><a href="Product-2">Product-2</a></li>
      <li  ><a href="Product-3">Product-3</a></li>
      <li  ><a href="Product-4">Product-4</a></li>
      <li  ><a href="Product-5">Product-5</a></li>
      <li  ><a href="Product-6">Product-6</a></li>
    </ul>
  </li>
  <li  ><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>");

CodePudding user response：

Try out this:

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

CodePudding user response：

Both of those lines have incorrect semantics:

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

The return value of the $() function would always be a jQuery object so the condition would always evaluate to true. You could do this instead

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

but hold on because it's unnecessary.

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

appends the <span> element to all elements matching the selector. The :has() in the other line has no effect on that selector.

What I'm assuming you actually want is

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

With no if. It would select all elements which are descendants of nav li.menu-item-has-children:has(ul), and append the <span> element to them.

CodePudding user response：

Because you are appending span element to every anchor tag under li.menu-item-has-children class.

Your can use > selector.

Try replacing this line.

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