How to sort a list alphabetically using jQuery ?

Given a list of elements, The task is to sort them alphabetically and put each element in the list with the help of jQuery.

  • jQuery text() Method: This method set/return the text content of the selected elements. If this method is used to return content, it provides the text content of all matched elements (HTML tags will be removed). If this method is used to set content, it replace the content of all matched elements.

    Syntax:



    • Return the text content:
      $(selector).text()
    • Set the text content:
      $(selector).text(content)
    • Set text content using a function:
      $(selector).text(function(index, curContent))

    Parameters:

    • content: It is required parameter. It specifies the new text content for the selected elements.
    • function(index, curContent): It is optional parameter. It specifies a function that returns the new text content for the selected elements.
      • index: It returns the index position of the element in the set.
      • curContent: It returns current content of selected elements.
  • JavaScript String toUpperCase() Method: This method converts a string to uppercase letters.

    Syntax:

    string.toUpperCase()

    Return Value: It returns a string, representing the value of a string converted to uppercase.

  • jQuery appendTo() Method: This method adds HTML elements at the end of the selected elements.

    Syntax:

    $(content).appendTo(selector)

    Parameters:

    • content: It is required parameter. It specifies the content to insert (must contain HTML tags).
    • selector: It is required parameter. It specifies on which elements to append the content.

Example 1: In this example, first the list elements are selected and then passed to a function for sorting. After sorting they are appended to the Parent element using appendTo() method in sorted manner.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Sort a list alphabetically
        </title>
          
        <script src
        </script>
    </head
      
    <body
        <h1 style = "text-align:center; color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style
            "text-align:center; font-size: 15px; font-weight: bold;">
            click on the button to sort the list
        </p>
          
        <ul>
            <li>Geeks</li>
            <li>For</li>
            <li>GFG</li>
            <li>GeeksForGeeks</li>
        </ul>
        <br>
          
        <center>
            <button>
                click here
            </button>
        </center>
          
        <p id = "GFG_DOWN" style
            "text-align:center; color:green; font-size:20px; font-weight:bold;">
        </p>
          
        <script>
            function Ascending_sort(a, b) {
                return ($(b).text().toUpperCase()) < 
                    ($(a).text().toUpperCase()) ? 1 : -1; 
            }
            $('button').on('click', function() {
                $("ul li").sort(Ascending_sort).appendTo('ul');
                $("#GFG_DOWN").text("sorted");
            });                 
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: In this example, First the list elements are selected and then passed to a function for sorting. After sorting they are appended to the Parent element using appendTo() method in sorted manner. This example uses the same method as in the first example but with a different approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Sort a list alphabetically
        </title>
          
        <script src
        </script>
    </head
      
    <body
        <h1 style = "text-align:center; color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "text-align:center; font-size: 15px; font-weight: bold;">
            click on the button to sort the list
        </p>
          
        <ul class="mylist">
            <li>a</li>
            <li>c</li>
            <li>b</li>
            <li>B</li>
        </ul>
        <br>
          
        <center>
            <button>
                click here
            </button>
        </center>
          
        <p id = "GFG_DOWN" style
            "text-align:center; color:green; font-size:20px; font-weight:bold;">
        </p>
          
        <script>
            function sort(selector) {
                $(selector).children("li").sort(function(a, b) {
                    var A = $(a).text().toUpperCase();
                    var B = $(b).text().toUpperCase();
                    return (A < B) ? -1 : (A > B) ? 1 : 0;
                }).appendTo(selector);
            }
              
            $('button').on('click', function() {
                sort("ul.mylist");
                $("#GFG_DOWN").text("sorted");
            });                 
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.