Сортировка вложенных списков с помощью jquery

Question

Я пытаюсь отсортировать вложенные списки.Я наткнулся на эту ссылку: Сортировка элементов

Однако, это дает мне большую часть пути,Предполагается, что у вас нет списков, подобных

<ul>
  <li><span>sortable text a</span>
    <ul>
      <li><span>sortable subtext</span></li>
    </ul>
  </li>
<ul>

Всякий раз, когда я использую код, предложенный выше, любой вложенный список добавляется к первому <li> во вложенном списке.Мне нужно, чтобы перейти к исходному элементу списка.

Мой код:

$(document).ready(function() {
  // for each ul separately
  $('#rootUl ul, ul').each(function(_, ul) {
    // get all the nodes to be sorted
    var $toSort = $(ul).children('li').children('span');

    // extract the text
    var values = $toSort.get().map(function(span) {
      return span.textContent;
    });

    // sort the text
    values.sort();

    // shove reordered texts back into the original elements
    values.forEach(function(value, index) {
      $toSort[index].textContent = value;
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="rootUl">
  <li><span>zzz</span>
    <ul>
      <li><span>dd zzz</span></li>
      <li><span>aa zzz</span></li>
      <li><span>bb zzz</span></li>
    </ul>
  </li>
  <li><span>ccc</span>
    <ul>
      <li><span>ll ccc</span></li>
      <li><span>nn ccc</span></li>
      <li><span>mm ccc</span></li>
    </ul>
  </li>
  <li><span>rrr</span>
    <ul>
      <li><span>ss rrr</span>
        <ul>
          <li><span>dd ss rrr</span></li>
          <li><span>ff ss rrr</span></li>
          <li><span>ee ss rrr</span></li>
        </ul>
      </li>
      <li><span>rr rrr</span></li>
      <li><span>qq rrr</span></li>
    </ul>
  </li>
</ul>

Я ожидал бы следующее:

<ul id="rootUl">
  <li>
    <span>ccc</span>
    <ul>
      <li><span>ll ccc</span></li>
      <li><span>mm ccc</span></li>
      <li><span>nn ccc</span></li>
    </ul>
  </li>
  <li>
    <span>rrr</span>
    <ul>
      <li><span>qq rrr</span></li>
      <li><span>rr rrr</span></li>
      <li><span>ss rrr</span>
        <ul>
          <li><span>dd ss rrr</span></li>
          <li><span>ee ss rrr</span></li>
          <li><span>ff ss rrr</span></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <span>zzz</span>
    <ul>
      <li><span>aa zzz</span></li>
      <li><span>bb zzz</span></li>
      <li><span>dd zzz</span></li>
    </ul>
  </li>
</ul>

Но вместо этого я получаю это:

<ul id="rootUl">
  <li>
    <span>ccc</span>
    <ul>
      <li><span>aa zzz</span></li>
      <li><span>bb zzz</span></li>
      <li><span>dd zzz</span></li>
    </ul>
  </li>
  <li>
    <span>rrr</span>
    <ul>
      <li><span>ll ccc</span></li>
      <li><span>mm ccc</span></li>
      <li><span>nn ccc</span></li>
    </ul>
  </li>
  <li><span>zzz</span>
    <ul>
      <li>
        <span>qq rrr</span>
        <ul>
          <li><span>dd ss rrr</span></li>
          <li><span>ee ss rrr</span></li>
          <li><span>ff ss rrr</span></li>
        </ul>
      </li>
      <li><span>rr rrr</span></li>
      <li><span>ss rrr</span></li>
    </ul>
  </li>
</ul>

Answer 1

Вам нужно отсортировать элементы li в их родительских списках, а не просто перемещать текстовое содержимое span s.Используйте функцию обратного вызова в sort(), которая сравнивает текст диапазона.

После того, как вы отсортировали li s, вы можете добавить их к их родительскому ul, чтобы переставить их в DOM.

Также не обязательно указывать #rootUl ul и ul в селекторе, поскольку ul будет соответствовать #rootUl ul.

$(document).ready(function() {
  // for each ul separately
  $('ul').each(function(_, ul) {
    // get all the nodes to be sorted
    var $toSort = $(ul).children('li');
    $toSort.sort((li1, li2) => $(li1).children("span").text().localeCompare($(li2).children("span").text()));
    $toSort.each(function() {
      $(this).appendTo(ul);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="rootUl">
  <li><span>zzz</span>
    <ul>
      <li><span>dd zzz</span></li>
      <li><span>aa zzz</span></li>
      <li><span>bb zzz</span></li>
    </ul>
  </li>
  <li><span>ccc</span>
    <ul>
      <li><span>ll ccc</span></li>
      <li><span>nn ccc</span></li>
      <li><span>mm ccc</span></li>
    </ul>
  </li>
  <li><span>rrr</span>
    <ul>
      <li><span>ss rrr</span>
        <ul>
          <li><span>dd ss rrr</span></li>
          <li><span>ff ss rrr</span></li>
          <li><span>ee ss rrr</span></li>
        </ul>
      </li>
      <li><span>rr rrr</span></li>
      <li><span>qq rrr</span></li>
    </ul>
  </li>
</ul>