javascript - 根据 <li> 内 <span> 中的文本对 <Ul> 的 <li> 元素进行排序

Question

我有一个嵌套的<ul>喜欢 <ul>与 <ul>以及所有<li>下<ul>有<span>在他们中。我想对所有 <li> 进行排序项目根据各自的文本按字母顺序排列<span>

这是示例

<ul id="rootUl">
  <li>
   <span>zz</span>
  </li>
  <li>
    <ul>
      <li><span>rr</span></li>
      <li><span>bb</span></li>
      <li><span>hh</span></li>
    </ul>
  <li>
   <span>kk</span>
  </li>
  <li>
   <span>mm</span>
  </li>

 </ul>

根<ul id="rootUl">将永远存在，但此 <ul> 中的所有元素动态生成。

目前我正在尝试获取所有 <ul>下<ul id="rootUl">放入数组中并将它们一一传递给排序函数。

这是 fiddle http://jsfiddle.net/6tvzhkvk/2/

给定样本的预期结果如下

<ul id="rootUl">
  <li>
   <span>kk</span>
  </li>
  <li>
    <ul>
      <li><span>bb</span></li>
      <li><span>hh</span></li>
      <li><span>rr</span></li>
    </ul>
  <li>
   <span>mm</span>
  </li>
  <li>
   <span>zz</span>
  </li>

 </ul>

Answer 1

// for each <ul> separately
$('#rootUl ul, #rootUl').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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="rootUl">
  <li>
   <span>zz</span>
  </li>
  <li>
    <ul>
      <li><span>rr</span></li>
      <li><span>bb</span></li>
      <li><span>hh</span></li>
    </ul>
  <li>
    <span>kk</span>
  </li>
  <li>
    <span>mm</span>
  </li>
</ul>