Alphabetize a list using JS or jQuery

Question

I\'m trying to take the contents of a list, that is not in alphabetical order, then by adding each item to an array, sort them into alphabetical order and insert them back i

Answer 1

Adjust id to className at .alphabet element to prevent duplicate ids in document.

You can use String.prototype.split() with "" as parameter, Array.prototype.sort(), .text()

var li = $(".alphabet"), text = li.text().split("").sort();

li.text(function(index) {
  return text[index]
})

<script src="//code.jquery.com/jquery-git.js"></script>
<ul>
  <li class="alphabet">B</li>
  <li class="alphabet">C</li>
  <li class="alphabet">A</li>
</ul>

Answer 2

There's no need to generate an array here, you can use the sort() method directly on the jQuery object resulting from selecting the li elements. After sorting you can then append them back to the parent ul in the corrected order. Try this:

$("li").sort(function(a, b) {
    var aText = $(a).text(), bText = $(b).text();
    return aText < bText ? -1 : aText > bText ? 1 : 0;
}).appendTo('ul');

Updated fiddle

Also note that having duplicate id attributes in a document is invalid. Your #alphabet elements should be changed to use a class instead.

Answer 3

There is no need for jQuery, you can use Vanilla JavaScript. ;)

1. Take the parent element (recommend id as identifier)
2. Convert node list to array, because sorting will then be easy
3. Sort array by custom criteria "element.innerText" is the visible part

4. Move item by item to the end in correct order

   // selector to parent element (best approach by id)
   var parent = document.querySelector("ul"),
       // take items (parent.children) into array
       itemsArray = Array.prototype.slice.call(parent.children);
   
   // sort items in array by custom criteria
   itemsArray.sort(function (a, b) {
       // inner text suits best (even when formated somehow)
       if (a.innerText < b.innerText) return -1;
       if (a.innerText > b.innerText) return 1;
       return 0;
   });
   
   // reorder items in the DOM
   itemsArray.forEach(function (item) {
       // one by one move to the end in correct order
       parent.appendChild(item);
   });
   

It is hundred times faster than jQuery, check the performance comparison charts http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/

Answer 4

I have updated your jsfiddle here, basically you have remove the <li>s and then add them with the new order.

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
$("ul li").remove(); // Clears list

for( word of sectors) {
    $("ul").append("<li>" + word + "</li>");
}

Answer 5

You can simply do:

$("li").each(function(i) { $(this).text(sectors[i]) });

After you sorted the sectors array. Note your id's need to be unique.