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

Question

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

<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>