Добавьте элемент HTML в тег привязки, если он имеет дочернее или подменю.

я пробовал это

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>");
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
2
0
98
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Обе эти строки имеют неправильную семантику:

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

Потому что вы добавляете элемент span к каждому тегу привязки в классе li.menu-item-has-children.

Вы можете использовать селектор >.

Попробуйте заменить эту строку.

$ ('nav li.menu-item-has-children > a').append ( "<span class=\"plus-minus\">+</span>");
Ответ принят как подходящий

Попробуйте это:

(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);

Другие вопросы по теме