All geek questions in one place

Insert a new list item in the correct position in alphabetical order

I am wondering what is the most efficient way to insert an element (in this case a string) into its correct alphabetical order, with ONLY JavaScript (and not jQuery)? I thought that sorting the list immediately after inserting the item would be enough, but it does not work. I get the value that needs to be inserted through the value entered in the text box.

Before inserting a new item, the list is as follows:

  • Albatross
  • Fantasy
  • Kea
  • Kiwi
  • takache
  • Tui

If I want to add "Bellbird" to this list, I expect the list to now look:

  • Albatross
  • Bellbird
  • Fantasy
  • Kea
  • Kiwi
  • takache
  • Tui

Here is the code that I use to try to achieve the desired result:

HTML:

<ul id="birds"> <li>Albatross</li> <li>Fantail</li> <li>Kea</li> <li>Kiwi</li> <li>Takahe</li> <li>Tui</li> </ul> <p><label for="addNewBirdField">Add new bird: </label> <input type="text" id="addNewBirdField" /></p> <p><button id ="addItem">Add new bird</button></p>

JavaScript:

 function addNewBird() { var birdList = document.getElementById("birds"); //get birds unordered list var newBirdItem = document.createElement("li"); // create new li element var bird = document.getElementById("addNewBirdField").value // get data from form field var birdValue = document.createTextNode(bird); // create new textNode with value from previous step newBirdItem.appendChild(birdValue); // append textNode from previous step to li element (newBirdItem) birdList.appendChild(newBirdItem); // append li element to bird list birdList.sort(); } var addItem = document.getElementById("addItem"); addItem.onclick = addNewBird;

I looked at this link when sorting arrays (based on my programming knowledge, I assume that each element of the list is in an array), I understand what lexicographic sorting is - I found out about it this week.

If someone can help me with this, he would be very grateful.

+6
source share
2 answers
 birdList.sort();

This will not work, since the value returned by document.getElementById() is never an Array , it is either a reference to an element or null if the element is not found. Only Array (by default) has a sort() method.

Instead, you want ...

 var birds = birdList.getElementsByTagName("li"); birds = Array.prototype.slice.call(birds).sort(function(a, b) { return a.firstChild.data.toLowerCase().localeCompare(b.firstChild.data.toLowerCase()); }); for (var i = 0, length = birds.length; i < length; i++) { birdList.appendChild(birds[i]); }

jsFiddle .

If you do not need to support older browsers ...

 var birds = birdList.querySelectorAll("li"); birds = Array.prototype.slice.call(birds).sort(function(a, b) { return a.textContent.toLowerCase().localeCompare(b.textContent.toLowerCase()); }).forEach(function(bird) { birdList.appendChild(bird); });

jsFiddle .

Finally, if you have jQuery at your disposal ...

 $(birdList).find("li").sort(function(a, b) { return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase()); }).each(function() { $(birdList).append(this); });

jsFiddle .

+5
source

You do not need to re-sort the entire list and reinsert each item.

You can simply find the position in the sorted list to insert a new item.

 <!doctype html> <html lang="en"> <head> <meta charset= "utf-8"> <title>Test Page</title> <script> function addNewBird(){ var bird= document.getElementById("addNewBirdField").value; if(bird){ bird= bird.charAt(0).toUpperCase()+ bird.substring(1).toLowerCase(); var birdList= document.getElementById("birds"), list= birdList.getElementsByTagName('li'), i= 0, who= list[0], newBirdItem= document.createElement("li"); newBirdItem.appendChild(document.createTextNode(bird)); while(who && who.innerHTML<bird) who= list[++i]; if(who) birdList.insertBefore(newBirdItem, who); else birdList.appendChild(newBirdItem); } return newBirdItem; } </script> </head> <body> <div> <ul id="birds"> <li>Albatross</li> <li>Fantail</li> <li>Kea</li> <li>Kiwi</li> <li>Takahe</li> <li>Tui</li> </ul> <p><label for="addNewBirdField">Add new bird: </label> <input type="text" id="addNewBirdField" /></p> <p><button id ="addItem" onclick="addNewBird()">Add new bird</button></p> </div> </body> </html>
+2
source

Source: https://habr.com/ru/post/925991/

More articles:


All Articles