1. 首頁
  2. 問答
  3. 按字母順序排列列表項

按字母順序排列列表項

2015-09-11 284 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

相關問題

 相關問題