Question

我没有在这方面取得进展所以我需要你的帮助。

这是wordpress的三重嵌套菜单。它看起来像这样：

<ul class="sub-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#" class="has_children">Link with children</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#" class="has_children">Link with children</a>
                 <ul class="sub-menu">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul> 
            </li>
         </ul>
    </li>
</ul>

我想在每个包含has_children的链接中添加一个类ul.sub-menu。

我的代码现在是：

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function() {
    jQuery('a', this).addClass('has_children');
})

适用于第一个ul.sub-menu li，但所有其他子链接现在都有类has_children，即使它们没有子菜单。

编辑[解决方案]：

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function () {
jQuery('>a', this).addClass('has_children');

}）

这就是诀窍！ :)谢谢

Answer 1

您需要将选择器更改为仅匹配当前a中的直接li，否则它将匹配所有级别中的所有a。使用>a仅匹配直接a，类似于：

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function () {
    jQuery('>a', this).addClass('has_children');
})

DEMO - 仅匹配当前a

内的li

在DEMO中，我删除了您在初始HTML中使用的所有has_children类，以表明它们确实是按照脚本的预期添加的。

Answer 2

jsFiddle

HTML：

<ul class="sub-menu">
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link with children</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a>
            </li>
            <li><a href="#">Link with children</a> 
                <ul class="sub-menu">
                    <li><a href="#">Link</a>

                    </li>
                    <li><a href="#">Link</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

jQuery的：

$('ul.sub-menu li').each(function () {
    if ($(this).find('ul').hasClass('sub-menu'))  $(this).find('a:first').addClass('has_children');
});

jQuery tripple嵌套菜单与子菜单

2 个答案: