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:

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.
Sort the countries list via .sort() method;
Create new list item for each country in the list via .map() method (es6+ syntax with arrow function)
Append the all the list items to the #datatables container.

Answer

Leave a Reply Cancel reply