1. 首页
  2. 问答
  3. 按字母顺序排列列表项

按字母顺序排列列表项

2015-09-11 258 views
0

我有一个简单的无序列表，即一个菜单（具有两级子菜单）。我希望它的子菜单（和这些子菜单的子菜单）从上到下按字母顺序显示。对于菜单中的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>

在这里我要进行排序，其菜单是一个与id=nav（其余为标题和菜单的页脚）的div。
请帮助我解决这个问题。

来源

2015-09-11 Suraj Pandey

+1

什么编程语言？ – jdweng

+0

html或jquery！ –

回答

0

排序HTML集合可能很麻烦，但我想我可以为你解决这个有趣的任务。那么，这个想法是将集合转换为数组和排序数组，因为在JS中对象/集合内的排序是毫无意义的。

然后，我们只是基于排序后的数组重新创建整个结构，并将其插入页面而不是前一页。 HTML部分只是您的html输入。在JS部分，我使用了Jquery。 sortItems(arr)是一个辅助函数。我使用jQuery.map将列表对象的集合转换为列表对象的数组。这里有一层嵌套，我在外层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>

来源

2017-07-04 15:55:35 curveball

1

答案可以很简单，优雅与角JS，因为ü可以申请本地过滤器“NG重复”指令。 在这种情况下，您需要“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>

来源

2017-07-04 16:50:49

相关问题

 相关问题