jquery - 如何向上移动第三级 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').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))
})