javascript - 按字母顺序对列表项进行排序

Question

我有一个简单的无序列表，即一个菜单(具有两级子菜单)。我希望它的子菜单(以及这些子菜单的子菜单)按字母顺序从上到下显示。菜单的 HTML 代码如下:

    <div id="sidebar2" class="sidebar" >
         <ul class="goo-collapsible goo-coll-stacked">
           <li class="header">Information Systems</li>
         </ul>
      <div >

       <div id="nav">
         <ul id="navList">

            <li><a href="#">Other Databases and Portals</a>
    <!-- This is the sub nav -->
              <ul class="listTab">
                 <li ><a href='http://www.icar.org.in/rohudatabase/index.php' target="_blank">Rohu Database</a></li>
            <li ><a href='http://117.240.114.67/weedid/aiwsweedident.aspx' target="_blank">Weed Seed Identification</a></li>
            <li ><a href='http://117.240.114.67/weedid/cwsmainweeds.aspx' target="_blank">Weed Seedling Identification</a></li>
            <li ><a href='http://117.240.114.67/weedid/bwiweedident.aspx' target="_blank">Weed Identification</a></li>

            <li ><a href='http://www.crida.in:8080/naip/index.jsp' target="_blank">Crop Pest DSS</a></li>
            <li ><a href='http://www.cropweatheroutlook.in' target="_blank">Crop Weather Outlook: AICRPAM tools</a></li>
            <li ><a href='http://www.nbfgr.res.in/Databases/formfish/index.html' target="_blank">Automated Species Identification System</a></li>
            <li ><a href='http://www.nbfgr.res.in/Databases/ornamental/home.aspx' target="_blank">Marine ornamental finfishes and shell fishes</a></li>
            <li ><a href='http://210.212.93.85/agris/breed.aspx' target="_blank">Animal Genetic Resources of India</a></li>
            <li ><a href='http://www.ncipm.org.in/cropsap2014/login.aspx' target="_blank">Crop Pest Surveillance and Advisory</a></li>
            <li ><a href='http://www.ncipm.org.in/ICTMalawi/' target="_blank">ICT Based Pest Surveillance</a></li>
            <li ><a href='http://ctcri.in/statistics/FormsCEI.aspx' target="_blank">TUBER CROPS STATISTICS</a></li>

            <li ><a href='http://www.crijaf.org.in/SideLinks/QuickLinks/AgrometeorologicalData.html' target="_blank">Agrometeorological Data at ICAR-CRIJA</a></li>
            <li ><a href=' http://www.crida.in:8080/naip/index.jsp' target="_blank">Crop Pest DSS</a></li>
            <li ><a href=' http://nrcgrapes.nic.in/weather_forecast_based_grape_adv.htm' target="_blank">Weather forecast based grape advice</a></li>
            <li ><a href='http://research.ciphet.in/' target="_blank">Post-Harvest Machinery</a></li>
            <li ><a href='http://cift.res.in/innercontent.php?contentid=NjA=' target="_blank">CIFT Knowledge Base</a></li>
            <li ><a href='http://nrce.nic.in/breeds.php' target="_blank">Equine Breeds of India</a></li>
    </ul>
  </li>
  <li><a href="#">Genetic Resources Portals</a>
    <!-- This is the sub nav -->
    <ul class="listTab">
     <li ><a href='http://www.mgrportal.org.in/' target="_blank">Microbial Genetic Resources Portal</a></li>
            <li ><a href='http://www.nbpgr.ernet.in/PGR_Databases.aspx' target="_blank">PGR Database</a></li>
            <li ><a href='http://www.nbpgr.ernet.in:8080/PGRPortal/(S(fzkcby45lxboum2hufans255))/default.aspx' target="_blank">PGR Portal</a></li>
            <li ><a href='http://210.212.93.85/agrportal/index.htm' target="_blank">Animal Genetic Resources Portal</a></li>
            <li ><a href='http://www.sugarcane.res.in/index.php/en/resrch/genetic-resources' target="_blank">Sugarcane Genetic Resources</a></li>
    </ul>
  </li>
  </div>
  </div>
  <div style="margin-top: 65px;">
  <ul class="goo-collapsible goo-coll-stacked">
    <li class="header">Latest News</li>
    <marquee direction="up" style = "width:100%;margin:0px;padding:0px;" scrolldelay="200" onMouseOver="this.stop();" onMouseOut="this.start();">
    <li><a href="PDF/Digitization AICRPs Information.pdf" target="_blank" >Digitization AICRPs Information</a></li>
    <li><a href="PDF/Draft Format for Technology Database.pdf" >Draft Format for Technology Database</a></li>
    <li><a href="PDF/ICAR Guidelines Research Papers 2014.pdf" >ICAR Guidelines Research Papers 2014</a></li>
    <li><a href="PDF/Letter for Nomination of Nodal officers.pdf" >Letter for Nomination of Nodal officers</a></li>
    <li><a href="PDF/Mapping of Natural Resources.pdf" >Mapping of Natural Resources</a></li>
    <li><a href="JavaScript:display('Circular');" >Circular</a></li>
    </marquee>
    </ul>
    </div>
</div>

这里我想要排序的div菜单是带有id=nav的菜单(其余的是菜单的页眉和页脚)。
请帮助我解决这个问题。

Answer 1

使用 Angular JS，答案可以简单而优雅，因为您可以将 native 过滤器应用于“ng-repeat”指令。在这种情况下，您需要“orderBy”。请参阅 API 引用 https://docs.angularjs.org/api/ng/filter/orderBy

function ctrl($scope) {
  $scope.filter = 'name';
  $scope.alphabeticalReverse = false;
  $scope.menuItems = [{
      name: 'itemB',
      link: 'https://stackoverflow.com/',
      submenue: [{
          name: 'subItemZ',
          link: 'https://stackoverflow.com/'
        },
        {
          name: 'subItemA',
          link: 'https://stackoverflow.com/'
        }
      ]
    },
    {
      name: 'itemC',
      link: 'https://stackoverflow.com/'
    },
    {
      name: 'itemA',
      link: 'https://stackoverflow.com/'
    }
  ];
}

<!DOCTYPE html>
<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>Angular JS Demo</title>
</head>

<body ng-controller="ctrl">
  <ul class="main-menu">
    <li ng-repeat="item in menuItems | orderBy: filter:alphabeticalReverse">
      <a ng-href="{{item.link}}">{{item.name}}</a>
      <ul class="sub-menu">
        <li ng-repeat="subItem in item.submenue | orderBy:filter:!alphabeticalReverse">
          <a ng-href="{{subItem.link}}">{{subItem.name}}</a>
        </li>
      </ul>
    </li>
  </ul>
</body>

</html>