CODEWITHSUNDEEP
javascriptjquerylistsorting
Suraj Pandey
Suraj Pandey

Reputation: 31

sorting list items alphabetically

I have a simple unordered list i.e. a menu (with two levels of submenus). I want its submenus (and submenus of these submenus) to be displayed alphabetically from top to down. The HTML code for the menu is as follows:

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

here the div whose menu I want to be sorted is the one with id=nav (rest are header and footer of the menu).
Please aid me over the matter.

Upvotes: 0

Views: 343

Answers (2)

Uliana Pavelko
Uliana Pavelko

Reputation: 2962

The answer can be simple and elegant with Angular JS, since u can apply native filters to "ng-repeat" directive. In this case you need "orderBy". See API reference 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>

Upvotes: 1

curveball
curveball

Reputation: 4505

Sorting HTML collections might be troublesome, but I think I could solve this interesting task for you. Well, the idea is to convert collections into arrays and sort arrays since sorting within objects/collections is senseless in JS.

Then we just recreate the whole structure based on sorted arrays and insert it into the page instead of the previous one. The HTML part is just your html input. In JS part I used Jquery. sortItems(arr) is a helper function. I use jQuery.map to convert collections of list objects into arrays of list objects. You have 1 level of nesting here and I introduced new property on the outer li - arrayChildren - to store the nested lists as arrays. In the end, I just iterate through my array and recreate the nested lists from arrayChildren property.

Well, it solves what you asked for although the functionality is quite basic. 

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

Upvotes: 0

Related Questions