how to select specific range of
  • items between 2 id and sort them in Javascript / jQuery
  • I have an HTML list as below :

    <ul class="dropdown-menu scrollable-menu" id="Own">
    <li class="dropdown-header" id="datatables">Data Grid</li>
    <li><a>Austria</a></li>
    <li><a>China</a></li>
    <li class="divider" id="firstDivider"></li>
    <li class="dropdown-header"id="chart">Charts</li>
    <li><a>Line Chart</a></li>
    </ul>
    

    I am adding new <li> dynamically inside my <ul> under each <li> with class dropdown-header.

    For example under Data Grid I will add new list item Belgium

    $( '<li><a>Belgium</a></li>' ).insertAfter( "#datatables" );
    

    Now here comes the issue. When a new list item is added I want to sort my list alphabetically. So in my case it should be :

    <li><a>Austria</a></li>
    <li><a>Belgium</a></li>
    <li><a>China</a></li>
    

    I tried multiple approach how to select a specific range of li items and sort them but couldn’t make it work.

    here is my latest attempt :

    function asc_sort(a, b){ return ($(b).text().toUpperCase()) < ($(a).text().toUpperCase()) ? 1 : -1; }
    
    //add new li item under Data Grid
    $( '<li><a>Belgium</a></li>' ).insertAfter( "#datatables" );
    //select all li items till li with id 'firstDivider', sort them and append to Own in the begining
    $("#Own > li").nextUntil('#firstDivider').sort(asc_sort).appendTo("#Own");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
    
    <ul class="dropdown-menu scrollable-menu" id="Own">
        <li class="dropdown-header" id="datatables">Data Grid</li>
        <li><a>Austria</a></li>
        <li><a>China</a></li>
        <li class="divider" id="firstDivider"></li>
        <li class="dropdown-header"id="chart">Charts</li>
        <li><a>Line Chart</a></li>
    </ul>

    Any suggestions please what I am doing wrong ? Thank you very much.

    Answer

    Try with this code:

    const countries = [
        'Austria',
        'China'
    ];
    countries.push('Belgium');
    countries.sort();
    const items = countries.map(c => '<li><a>'+ c +'</a></li>');
    $( "#datatables" ).append(items);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <ul class="dropdown-menu scrollable-menu" id="Own">
        <li class="dropdown-header" id="datatables">Data Grid</li>
        <li class="divider" id="firstDivider"></li>
        <li class="dropdown-header"id="chart">Charts</li>
        <li><a>Line Chart</a></li>
    </ul>

    What I’m doing is:

    1. Store all countries as a list. You can append new countries to that list at any time and always call .sort() to sort them alphabetically. It’s more practical.
    2. Sort the countries list via .sort() method;
    3. Create new list item for each country in the list via .map() method (es6+ syntax with arrow function)
    4. Append the all the list items to the #datatables container.

    Leave a Reply

    Your email address will not be published. Required fields are marked *