排序<李><Ul>根据<span>内部<李>

Sorting <li> elements of a <Ul> according to text in <span> inside <li>

本文关键字：gt lt 内部 span 根据 Ul 排序      更新时间：2023-09-26

我在<ul>中有一个类似于<ul>的嵌套<ul>，并且<ul>下的所有<li>都有<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>

根CCD_ 9将始终存在，但是该CCD_。

目前我正在尝试获取数组中<ul id="rootUl">下的所有<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>


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

试试这个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);
    });
}
相关文章：