如何在 ul > li 中查找所有类名

Question

我必须通过 javascript 更改我的 html 代码。 如果标签在类中包含 li 标签的 has-children，我想为标签添加 span 标签

<span> <a></a> <span class="sub-menu-toggle"></span></span>

这是我的代码，我可以更改第一步 li.has-children 如何更改所有内容？ 班级=有孩子

 $('.has-children').each(function(i, e) { var aTag = $(this).find('a')[0].outerHTML; var ulTag = $(this).find('ul')[0].outerHTML; $(this).html('<span>' + aTag + '<span class="sub-menu-toggle"></span></span>' + ulTag); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="site-menu"> <ul style="display: none"> <li class="has-children"> <a href="javascript:void(0)">Menu</a> <ul class="sub-menu"> <li class="has-children"> <a href="javascript:void(0)">First Sub Menu</a> <ul class="sub-menu"> <li class=""> <a href="javascript:void(0)">Second Sub Menu</a> </li> </ul> </li> </ul> </li> </ul> </nav>

Answer 1

这个怎么样？

1. 使用更好的选择器
2. 裹
3. 后

 $('.has-children>a').each(function() { $(this).wrap('<span/>') .after('<span class="sub-menu-toggle"/>'); });

 a { text-decoration: none } span a { text-decoration: underline } .sub-menu-toggle::after { content: " ʘ" }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="site-menu"> <ul style="display"> <li class="has-children"> <a href="javascript:void(0)">Menu</a> <ul class="sub-menu"> <li class="has-children"> <a href="javascript:void(0)">First Sub Menu</a> <ul class="sub-menu"> <li class=""> <a href="javascript:void(0)">Second Sub Menu</a> </li> </ul> </li> </ul> </li> </ul> </nav>