Question

我有一个<ul>的嵌套<ul>，<ul>位于<li>，而<ul>下的所有都包含<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>

项目进行排序

这里是样本

<ul id="rootUl">

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

目前我正在尝试将所有<ul id="rootUl">放在数组中的<ul id="rootUl"> <li> kk </li> <li> <ul> <li>bb</li> <li>hh</li> <li>rr</li> </ul> <li> mm </li> <li> zz </li> </ul>下，并将它们逐个传递给排序函数。

这是小提琴http://jsfiddle.net/6tvzhkvk/2/

给定样本的预期结果将类似于

{{1}}

Answer 1

＆＃13;

// 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;
  });
  
});

＆＃13;

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

＆＃13;

Answer 2

试试这个Fiddle

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);
    });
}

根据<span> <li> </li> </span> </ul> </li>中的文字对<ul>元素进行排序</li>

2 个答案: