資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
