如何将第三级 li 元素向上移动并删除 ul？

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 li').addClass('third').unwrap().each(function() {
    $(this).parent().after($(this))
})

Answer 3

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