как найти все имя класса в ul> li

Question

Я должен изменить свой код html на javascript. Я хочу добавить тег span для тега, если он содержит has-children в классе для тега 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. wrap
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>