如何在 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>