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 into the list in alphabetical order.

Plain language: I need to alphabetize a list using JS or jQuery.

Here's what I have. I just can't figure out how to insert the contents of the array in back into the list.

Thank you all in advance :)

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
console.log(sectors);

<script src=".4.0/jquery.min.js"></script>
<ul>
  <li id="alphabet">B</li>
  <li id="alphabet">C</li>
  <li id="alphabet">A</li>
</ul>

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 into the list in alphabetical order.

Plain language: I need to alphabetize a list using JS or jQuery.

Here's what I have. I just can't figure out how to insert the contents of the array in back into the list.

Thank you all in advance :)

var sectors = [];
$("li").each(function() { sectors.push($(this).text()) });
sectors.sort();
console.log(sectors);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<ul>
  <li id="alphabet">B</li>
  <li id="alphabet">C</li>
  <li id="alphabet">A</li>
</ul>

https://jsfiddle/stu16396/

• javascript
• jquery
• dom

• 1 id="alphabet" three times? You should really use class. – Roko C. Buljan Commented Mar 24, 2016 at 21:03
• Look at this james.padolsey./snippets/sorting-elements-with-jquery – StudioTime Commented Mar 24, 2016 at 21:05

5 Answers 5

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

1. Take the parent element (remend 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 parison charts http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/

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.

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./jquery-git.js"></script>
<ul>
  <li class="alphabet">B</li>
  <li class="alphabet">C</li>
  <li class="alphabet">A</li>
</ul>

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.

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>");
}