3

我正在尝试构建响应式导航，并希望将 <span> 附加到所有包含子菜单 <ul> 的顶级菜单项。出于某种原因，这只是将跨度附加到所有项目，有人可以建议为什么吗？

这是标记：

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

和脚本（jQuery）：

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

帮助表示赞赏！

4

2 回答 2

3

实际上，这就是您所需要的：

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

LIVE DEMO

使用:hasor.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

于 2013-03-24T19:28:42.587 回答
0

尝试这个

$.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) {
于 2013-03-24T19:18:32.613 回答