排序 <li> 一个元素 <Ul> 根据<span>里面的</span>文字 <li>

Question

我已经嵌套<ul>像<ul> ，在<ul>和所有<li>下<ul>有无<span>在其中。 我想根据其各自<span>文本按字母顺序对所有<li>项目进行排序

这是样品

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

root <ul id="rootUl">将始终存在，但是此<ul>中的所有元素都是动态生成的。

目前，我正在尝试获取数组<ul id="rootUl"> <ul>下的所有<ul>并将它们逐个传递给排序功能。

这是小提琴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> 

Answer 2

试试这个小提琴

JS代码：

$('#sortTree').click(function () {
    var items = $('#rootul > li').get();
    var nestedItems = $('#rootul > li > ul > li').get(); 
    items = sort(items);      
    adjustItems('#rootul', items);
    nestedItems = sort(nestedItems);
    adjustItems('#rootul > li > ul', nestedItems);    
});

function sort(items) {
    items.sort(function(a,b){
      var keyA = $(a).text();
      var keyB = $(b).text();

      if (keyA < keyB) return -1;
      if (keyA > keyB) return 1;
      return 0;
    });       
    return items;
}

function adjustItems(sel, items) {
    var ul = $(sel);
    $.each(items, function(i, li){
      ul.append(li);
    });
}