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.
-
Return the text content:
-
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.
<!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>
|
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 =
</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: