javascript - 如果存在子菜单，如何将跨度 append 到 <li>

Question

我正在尝试构建响应式导航，并希望将 append 到所有 包含子菜单

的顶级菜单项。出于某种原因，这只是将跨度 append 到所有项目，有人可以建议为什么吗？

这是标记:

<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item">
            <a href="#">Home</a>
            <ul class="nav-submenu">
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 1</a>
                </li>
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 2</a>
                </li>
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 3</a>
                </li>
                <li class="nav-submenu-item">
                    <a href="#">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="#">About</a>
        </li>
        <li class="nav-item">
            <a href="#">Services</a>
        </li>
        <li class="nav-item">
            <a href="#">Portfolio</a>
        </li>
        <li class="nav-item">
            <a href="#">Testimonials</a>
        </li>
        <li class="nav-item">
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

所以您可以看到第一个项目有一个下拉菜单，我想动态地将一个 span 元素 append 到每个包含子菜单的

• 。

  和脚本(jQuery):

  $.each($('.nav-item'), function (index, value) {
      if ($('.nav-item').children('ul').length > 0) {
          $(this).append($('<span class="nav-click"></span>'));
      }
  });
  

  感谢帮助!

Answer 1

实际上这就是您所需要的:

$('.nav-item:has(ul)').append('<span class="nav-click" />');

LIVE DEMO

使用 :has 或 .has() 将比所有这些 $.each 循环有趣得多。类循环已经使用类作为选择器完成，因为返回了一组你想要的元素的集合，这些元素还被 has 过滤，全部在一行中。

http://api.jquery.com/has-selector/
http://api.jquery.com/has/

如果您计划拥有一个多子级别列表，请使用:

$('nav li:has(ul)').append('<span class="nav-click" />');

LIVE DEMO