Question 2262 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Add a HTML element to the anchor tag if has child or sub menu – WordPress

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

i want it to be

<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>");
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>");
    Login or Signup to reply.
  3. 0

    Try out this:

    (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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search