Question

我有一个相当大的三层深度菜单，由嵌套列表组成，如本例所示

<ul class="nav">
    <li><a href="#">1</a>
        <ul>
            <li><a href="#">2</a>
                <ul>
                    <li><a href="#">level 3</a></li>
                    <li><a href="#">level 3</a></li>
                    <li><a href="#">level 3</a></li>
                </ul>
            </li>
            <li><a href="#">2</a>
        </ul>
    </li>
</ul>

对于菜单我只想使用两个级别，所以我想删除第三个ul并为其（前）子项添加一个类用于样式目的。

这可以用jQuery完成吗？结果应该是这样的：

<ul class="nav">
    <li><a href="#">1</a>
        <ul>
            <li><a href="#">2</a></li>
            <li class="third"><a href="#">level 3</a></li>
            <li class="third"><a href="#">level 3</a></li>
            <li class="third"><a href="#">level 3</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </li>
</ul>

感谢任何帮助！

Answer 1

这应该这样做：

$('ul ul ul').each(function() {
    $(this).parent().after($(this).find('li').addClass('third'));
    $(this).remove();
});

对于每个第三级UL元素，在UL的父元素之后插入所有子LI元素，然后删除UL本身。

Answer 2

$('ul ul ul').each(function() {
  $(this).parent().after($(this).find('li').addClass('third'));
  if (!$(this).parents('.exception').length){
   $(this).remove();
  }
});

Answer 3

$('ul ul ul li').addClass('third').unwrap().each(function() {
    $(this).parent().after($(this))
})

如何移动三级li元素并删除ul？

3 个答案: