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

【问题标题】：How to append a span to a <li> if a submenu exists如果存在子菜单，如何将跨度附加到 <li>
【发布时间】：2013-03-14 05:26:09
【问题描述】：

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

这是标记：

<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 元素附加到每个包含子菜单的

中。

还有脚本（jQuery）：

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

帮助表示赞赏！

【问题讨论】：

标签： javascript jquery html append

【解决方案1】：

试试这个

$.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) {

【讨论】：

我是如此接近！谢谢，当计时器用完时会接受这个。

【解决方案2】：

其实这就是你所需要的：

$('.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

【讨论】：

谢谢！这会为每个 <ul> 应用跨度类吗？尽管？假设有一个 3 层菜单？
@Halcyon21 在这种情况下使用 $('nav li:has(ul)').prepend('<span class="nav-click" />'); jsbin.com/ucebus/4/edit
有没有办法使用 .has() 而不是伪选择器来做到这一点？我想尽可能多地使用我的课程:-)
@Halcyon21 当然！，你试过吗？ $('nav li').has('ul').prepend('<span class="nav-click" />');
$('.nav-item').has('ul').prepend('');工作完美！谢谢！