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，答案可以简单而优雅，因为你可以将原生过滤器应用于＆＃34; ng-repeat＆＃34;指示。在这种情况下，您需要＆＃34; orderBy＆＃34;。请参阅API参考https://docs.angularjs.org/api/ng/filter/orderBy

＆＃13;

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/'
    }
  ];
}

＆＃13;

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

＆＃13;

Answer 2

对HTML集合进行排序可能很麻烦，但我想我可以为您解决这个有趣的任务。好吧，我们的想法是将集合转换为数组并对数组进行排序，因为在对象/集合中进行排序在JS中是没有意义的。

然后我们只是根据排序的数组重新创建整个结构，并将其插入页面而不是前一个。 HTML部分只是你的html输入。在JS部分，我使用了Jquery。 sortItems(arr)是辅助函数。我使用jQuery.map将列表对象的集合转换为列表对象的数组。你在这里有1级嵌套，我在外部li - arrayChildren引入了新属性 - 将嵌套列表存储为数组。最后，我只是遍历我的数组并从arrayChildren属性重新创建嵌套列表。

嗯，虽然功能非常基础，但它解决了你的要求。

$(document).ready(function() {
    function sortItems(arr) {
        arr.sort(function(el1, el2) {
            if(el1.childNodes[0].innerText > el2.childNodes[0].innerText) return 1;
            if(el1.childNodes[0].innerText < el2.childNodes[0].innerText) return -1;
            return 0;
        });
    }
    var items = jQuery.map( $("#nav ul#navList > li"), function( el ) {
        return el;
    });
    for(var i = 0; i < items.length; i++) {
        items[i].arrayChildren = jQuery.map( items[i].childNodes[4].children, function( el ) {
            return el;
        });
        sortItems(items[i].arrayChildren);
    }
    sortItems(items);
    var docfrag = document.createDocumentFragment();
    $.each( items, function( key, value ) {   
        var ul = $("ul").addClass("listTab");
        $.each( value.arrayChildren, function( key, val ) {
            $(value).find("ul.listTab").append(val);
        });
        $(docfrag).append(value);
    });
    $("#nav ul#navList").append(docfrag);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

按字母顺序排序列表项

2 个答案: