How to sort a list alphabetically using jQuery?

jQuery is a JavaScript library that works on the principle of write less, do more. In jQuery, the syntaxes that are longer and take more time to write are reduced, and alternate methods are introduced to use them in short form. In this article, we are going to learn about the method of sorting a list in alphabetical order using jQuery.

Let us discuss some common methods of jQuery which we will use in the code example to sort the list in alphabetical order.

• text() method − The text method is used to get and set the text of any HTML element. If you are using this to get the text, then it will return only text inside the selected element and removes all other elements that are used inside that element as child elements.

Syntax

The following syntax is used to implement the text() method on any selected element in an HTML document −

To get the text of selected element −

$("selected_element").text();

To set the text of selected element −

$("selected_element").text(" new_text ");

• html() method − It is used to get and set the inner HTML of the selected element. It will return the text of the selected element with the child elements contained by it.

Syntax

Following syntax is used to implement the html() method on any selected element in HTML document −

To get the text of selected element −

$("selected_element").html();

To set the text of selected element −

$("selected_element").html(" new_text ");

• val() method − This method is used to get the value entered by the user inside the input bar.

Syntax

The following syntax is used to implement the text() method on any selected element in the HTML document −

To get the text of selected element −

$("selected_element").val();

To set the text of selected element −

$("selected_element").val(" new_text ");

• click() method − It is the method that will allow the button to call a function when the button is clicked by the user.

Syntax

Following syntax will be used to set the click event to an button using jQuery −

$("selected_button_element").click( function(){
   // code of the function
} );

• appendTo() method − This method is used to append or insert any new thing to any element from back.

Syntax

Following syntax is used to append something to a new element using the appendTo() method −

$("selected_element").appendTo(" appendInThisElement ");

• sort() method − It is the custom function in jQuery that is used to sort the selected content whether it is in numerical form or in the alphabetical form.

Syntax

Following syntax can be used to sort any value using the sort() method in jQuery −

$("selected_element").sort( sorting_order );
// Parameter is optional

• toUpperCase() method − The toUpperCase() method will change all the lower case alphabets into the string to the upper case letters just for the purpose of comparing their ASCII values and sort them according to those values.

Syntax

Following syntax is used to change the lower case letters into upper case letters using the toUpperCase() method −

$("selected_element").text().toUpperCase();

Steps

• Step 1 − In the first step of the algorithm, we will add two different input elements of text type in the HTML document to get the input strings from the users to sort.

• Step 2 − In the next step, we will add two different lists in the document, one will be unordered list and another will be ordered list. The first list will show the initial order of the string parameters entered by the user, while the second list will show the sorted order of the strings.

• Step 3 − In this step, we will add a button element to the HTML document and make it call a function when user clicks the button with the help of click() method inside jQuery code.

• Step 4 − In the fourth step, we will add the cdn link of jQuery to the document, so that the document will understand the jQuery code and render it accordingly on the web browser.

• Step 5 − In the next step, we will define a custom function in jQuery which will sort the strings in the alphabetical order.

• Step 6 − In the last step, we will select the button with its id and use the click() method on it, inside the click method we will pass a function which sorts the text of list elements of unordered list and append them to the list elements of ordered list.

Let us now discuss the full code example which will sort the list which contains some text in alphabetical order.

Example

The below code example will explain you the use of above listed methods according to the discussed algorithm for the code practically −

<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> </script>
</head>
<body>
   <h2>Sorting a list alphabetically using jQuery</h2>
   <p>Enter your first name and last name below:</p>
   <input type = "text" id = "inp1" placeholder = "Name"><br><br>
   <input type = "text" id = "inp2" placeholder = "Last Name"><br><br>
   <h3> Initial Order: </h3>
   <ul id = "ul1">
      <li class = "li1"> </li>
      <li class = "li2"> </li>
   </ul>
   <h3> Sorted Order: </h3>
   <ol id = "ol1">
      <li class = "li1"> </li>
      <li class = "li2"> </li>
   </ol>
   <button id = "btn"> click to sort </button>
   <p id = "result"></p>
   <script>
      $(function () {
         function alphabetical_sort(a, b) {
            return (($(b).text().toUpperCase()) <
               ($(a).text().toUpperCase()) ? 1 : -1);
         }
         $("#btn").click(function () {
            var val1 = $("#inp1").val();
            var val2 = $("#inp2").val();
            var ulli1 = $("ul .li1");
            ulli1.html(" <b> " + val1 + " </b> ");
            var ulli2 = $("ul .li2");
            ulli2.html(" <b> " + val2 + " </b> ");
            var olli1 = $("ol .li1");
            olli1.html(" <b> " + val1 + " </b> ");
            var olli2 = $("ol .li2");
            olli2.html(" <b> " + val2 + " </b> ");
            $("ol li").sort(alphabetical_sort).appendTo("ol");
         });
      });
   </script>
</body>
</html>

In the above example, we have used the above discussed methods and sort the values stored in the li tags of ul tag in the alphabetical order and append them to the li tags of ol tag. If the values entered by the user are already in sorted order, then the order will not change and the content of both the ul and the ol list tags will be same.

Conclusion

In this article, we have learned about the method of sorting the list in alphabetical order using jQuery. We have discussed the method in detail by practically implementing it with the help of a code example of jQuery. We also discussed all the jQuery methods used to sort the list.