数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 对列表进行字母排序？
jQuery 是一个 JavaScript 库，其工作原理是 少写代码，多做事情。在 jQuery 中，简化了那些冗长且耗时的语法，并引入了替代方法以简化它们的使用。在本文中，我们将学习如何使用 jQuery 以字母顺序对列表进行排序。
让我们讨论一些 jQuery 中常用的方法，这些方法将在代码示例中用于按字母顺序对列表进行排序。
text() 方法 - text 方法用于获取和设置任何 HTML 元素的文本内容。如果将其用于获取文本，则它只会返回所选元素内的文本，并删除作为子元素包含在该元素中的所有其他元素。
语法
以下语法用于在 HTML 文档中任何选定的元素上实现 text() 方法：
获取所选元素的文本内容：
$("selected_element").text();
设置所选元素的文本内容：
$("selected_element").text(" new_text ");
html() 方法 - 它用于获取和设置所选元素的内部 HTML 内容。它将返回所选元素的文本内容以及其中包含的子元素。
语法
以下语法用于在 HTML 文档中任何选定的元素上实现 html() 方法：
获取所选元素的文本内容：
$("selected_element").html();
设置所选元素的文本内容：
$("selected_element").html(" new_text ");
val() 方法 - 此方法用于获取用户在输入栏中输入的值。
语法
以下语法用于在 HTML 文档中任何选定的元素上实现 text() 方法：
获取所选元素的文本内容：
$("selected_element").val();
设置所选元素的文本内容：
$("selected_element").val(" new_text ");
click() 方法 - 此方法允许按钮在用户点击时调用一个函数。
语法
以下语法将用于使用 jQuery 为按钮设置点击事件：
$("selected_button_element").click( function(){
// code of the function
} );
appendTo() 方法 - 此方法用于将任何新内容从后面附加或插入到任何元素中。
语法
以下语法用于使用 appendTo() 方法将某些内容附加到新元素：
$("selected_element").appendTo(" appendInThisElement ");
sort() 方法 - 它是 jQuery 中的自定义函数，用于对选定的内容进行排序，无论它是数字形式还是字母形式。
语法
以下语法可用于使用 jQuery 中的 sort() 方法对任何值进行排序：
$("selected_element").sort( sorting_order );
// Parameter is optional
toUpperCase() 方法 - toUpperCase() 方法会将字符串中的所有小写字母转换为大写字母，仅用于比较它们的 ASCII 值并根据这些值对它们进行排序。
语法
以下语法用于使用 toUpperCase() 方法将小写字母转换为大写字母：
$("selected_element").text().toUpperCase();
步骤
步骤 1 - 在算法的第一步中，我们将在 HTML 文档中添加两个不同的 text 类型输入元素，以获取用户要排序的输入字符串。
步骤 2 - 在下一步中，我们将在文档中添加两个不同的列表，一个是非有序列表，另一个是有序列表。第一个列表将显示用户输入的字符串参数的初始顺序，而第二个列表将显示字符串的排序顺序。
步骤 3 - 在这一步中，我们将在 HTML 文档中添加一个按钮元素，并使其在用户点击时调用一个函数，这可以通过 jQuery 代码中的 click() 方法来实现。
步骤 4 - 在第四步中，我们将 jQuery 的 cdn 链接添加到文档中，以便文档能够理解 jQuery 代码并相应地在 Web 浏览器中呈现它。
步骤 5 - 在下一步中，我们将在 jQuery 中定义一个自定义函数，该函数将按字母顺序对字符串进行排序。
步骤 6 - 在最后一步中，我们将选择具有其 ID 的按钮并对其使用 click() 方法，在 click 方法中，我们将传递一个函数，该函数对 无序列表的列表元素的文本进行排序，并将它们附加到 有序列表的 列表元素。
现在让我们讨论完整的代码示例，该示例将按字母顺序对包含一些文本的列表进行排序。
示例
下面的代码示例将根据讨论的算法对代码进行实际操作，从而解释上面列出的方法的使用：
<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>
在上面的示例中，我们使用了上面讨论的方法，并按字母顺序对存储在 ul 标记的 li 标记中的值进行排序，并将它们附加到 ol 标记的 li 标记。如果用户输入的值已经按排序顺序排列，则顺序不会更改，并且 ul 和 ol 列表标记的内容将相同。
结论
在本文中，我们学习了如何使用 jQuery 按字母顺序对列表进行排序。我们通过使用 jQuery 代码示例对方法进行了详细的讨论和实践实现。我们还讨论了用于对列表进行排序的所有 jQuery 方法。
557 次浏览
