如果子菜单存在，如何将跨度附加到<li> </li>

Question

我正在尝试构建自适应导航，并希望附加＆lt; span＆gt;到包含子菜单＆lt; ul＆gt;的所有顶级菜单项。出于某种原因，这只是将范围附加到所有项目，任何人都可以建议为什么？

这是标记：

<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元素附加到每个＆lt; li＆gt;包含子菜单。

脚本（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循环更有趣。类循环已经使用class作为选择器导致返回由has另外过滤的所需元素的集合，所有这些都在一行中。

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

如果您计划使用多子级列表：

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

的 LIVE DEMO

Answer 2

试试这个

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

这行有问题：

if ($('.nav-item').children('ul').length > 0) {

这将始终先选择.nav-item找到

在循环浏览每个this

时，您需要使用.nav-item

if ($(this).children('ul').length > 0) {