How to sort a list alphabetically using jQuery ? - GeeksforGeeks

29 May, 2019
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.
Syntax:
Return the text content:$(selector).text()
$(selector).text()
Set the text content:$(selector).text(content)
$(selector).text(content)
Set text content using a function:$(selector).text(function(index, curContent))
$(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.
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.
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.
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.
<!DOCTYPE HTML> <html>     <head>         <title>             Sort a list alphabetically        </title>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </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>                    
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.
<!DOCTYPE HTML> <html>     <head>         <title>             Sort a list alphabetically        </title>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </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>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?