对< li>进行排序< Ul>的元素根据< span>中的文字在< li>内部 [英] Sorting <li> elements of a <Ul> according to text in <span> inside <li>

问题描述

我在<ul>中有一个嵌套的<ul>，如<ul>，并且<ul>下的所有<li>都包含<span>.我想根据字母<span>

I have a nested <ul> like <ul> with in <ul> and all <li> under <ul> have <span> in them. I want to sort all <li> items in alphabetical order according to text in their respective <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>中的所有元素都是动态生成的.

root <ul id="rootUl"> will always be there but all elements inside this <ul> are generated dynamically.

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

currently I am trying to get all <ul> under <ul id="rootUl"> in array and pass them to sorting function one by one.

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

给定样本的预期结果将是

the expected result for given sample will be like

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

这篇关于对< li>进行排序< Ul>的元素根据< span>中的文字在< li>内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！