資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 根據 data 屬性的數值對元素進行排序？
通常，我們使用 JavaScript 的某些方法對陣列、物件和其他一些資料型別進行排序。但是，在本文中，我們將對某個元素的子元素進行排序，這些子元素的值是無序的，並且使用這些子元素的 data 屬性進行排序。
在本文中，我們將學習兩種不同的方法或方法，根據其賦予的 data 屬性的值對子元素進行排序。
我們用於排序的方法如下所示：
使用getAttribute()方法選擇 data 屬性的值。
使用dataset.percentage屬性選擇 data 屬性的值。
讓我們藉助與每種方法關聯的程式碼示例逐一詳細討論它們。
使用 getAttribute() 方法
getAttribute() 方法用於獲取傳遞到其括號內的特定元素賦予的值。我們可以使用此方法比較賦予子元素的 data 屬性的值。
語法
以下語法將向您展示如何使用 getAttribute() 方法獲取傳遞屬性的值：
var variable_name = selected_element.getAttribute(" attribute_name ");
讓我們瞭解 getAttribute() 方法在實踐中如何實現，以便根據其 data 屬性值對子元素進行排序。
步驟
步驟 1 - 在演算法的第一步中，我們將向 HTML 文件新增一個輸入元素，以從使用者那裡獲取子元素的值，並將其 data 屬性及其內容設定為使用者輸入的值。
步驟 2 - 在下一步中，我們將新增一個div元素，在其中我們將使用 JavaScript 動態新增子元素，然後根據其 data 屬性值對其進行排序。
步驟 3 - 在此步驟中，我們將新增兩個具有不同功能的不同按鈕。第一個按鈕將把子元素追加到上一步中定義的 div 標籤中，而第二個按鈕將根據其 data 屬性值對這些子元素進行排序。
步驟 4 - 在第四步中，我們將定義一個 JavaScript 函式，並將其作為上一步中定義的第一個按鈕的 onclick 事件的值。在此函式中，我們正在建立子元素，將其文字以及值設定為與其 data 屬性相同的值（與使用者輸入的值相同），然後對其進行排序。
步驟 5 - 在下一步中，我們將定義另一個 JavaScript 函式，該函式將選擇所有子元素一次，然後使用傳遞到 sort() 方法中的比較器函式根據 data 屬性值對其進行排序。
步驟 6 - 在最後一步中，我們將上一步中定義的函式分配給第三步中定義的第二個按鈕的 onclick 事件的值。
示例
以下示例說明了如何使用 getAttribute() 方法獲取子元素的 data 屬性的值，並根據該值對其進行排序：
<!DOCTYPE html>
<html>
<body>
<h2>Sort element by numerical value of data attribute using JavaScript</h2>
<p>Set the data percentage property and the content of each child:</p>
<input type = "number" id = "inp1" placeholder = "Data Percentage"> <br><br>
<p id = "prev">The initial order of paragraph elements in the container element is:</p>
<div id = "container"> </div>
<button id = "add" onclick = "appendElement()">Append element to the parent element</button>
<button id = "btn" onclick = "sortParent()">click to sort</button>
<p id = "result"> </p>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var result = $("#result");
var prev = $("#prev");
var container = $("#container");
function appendElement() {
var inp1 = $("#inp1");
var val1 = inp1.val();
var num = Number(val1);
var paras = $(" <p> </p> ").text(num);
paras.addClass("childPara");
paras.attr("data-percentage", num);
paras.appendTo(container);
inp1.val("");
}
function sortParent() {
function cmp(x, y) {
return x.getAttribute("data-percentage") - y.getAttribute("data-percentage");
}
var childElements = container.find(".childPara");
var sortedChildElements = childElements.sort(cmp).appendTo(container);
prev.html(" <b> The final sorted order of the child elements of the container element is: </b> ");
result.html(" The elements are sorted finally. ");
}
</script>
</body>
</html>
在此示例中，我們在比較器函式cmp中使用了getAttribute()方法來比較賦予子元素的data-percentage屬性的值。
使用 dataset.percentage 屬性
dataset.percentage 屬性用於獲取賦予所選元素的data-percentage屬性的值，然後我們可以使用此屬性比較值並根據這些值對元素進行排序。
語法
以下語法用於使用 dataset.percentage 屬性獲取子元素的 data 屬性的值：
Selected_element.data.percentage;
讓我們藉助程式碼示例在實踐中瞭解它，並對元素的子元素進行排序。
方法
此示例的方法與上一個示例的演算法非常相似。您只需要將上一個演算法中 cmp 函式的getAttribute()方法語法替換為dataset.percentage屬性語法即可比較子元素。
示例
以下示例將向您說明如何使用 dataset.percentage 屬性比較每個子元素的 data 屬性值並對其進行排序：
<!DOCTYPE html>
<html>
<body>
<h2>Sort element by numerical value of data attribute using JavaScript</h2>
<p>Set the data percentage property and the content of each child:</p>
<input type = "number" id = "inp1" placeholder = "Data Percentage"><br><br>
<p id = "prev"> The initial order of paragraph elements in the container element is:</p>
<div id = "container"> </div>
<button id = "add" onclick = "appendElement()">Append element to the parent element</button>
<button id = "btn" onclick = "sortParent()">click to sort </button>
<p id = "result"> </p>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var result = $("#result");
var prev = $("#prev");
var container = $("#container");
function appendElement() {
var inp1 = $("#inp1");
var val1 = inp1.val();
var num = Number(val1);
var paras = $(" <p> </p> ").text(num);
paras.addClass("childPara");
paras.attr("data-percentage", num);
paras.appendTo(container);
inp1.val("");
}
function sortParent() {
function cmp(x, y) {
return x.dataset.percentage - y.dataset.percentage;
}
var childElements = container.find(".childPara");
var sortedChildElements = childElements.sort(cmp).appendTo(container);
prev.html(" <b> The final sorted order of the child elements of the container element is: </b> ");
result.html(" The elements are sorted finally. ");
}
</script>
</body>
</html>
在以上示例中，我們使用了dataset.percentage屬性來獲取data-percentage屬性的值，並根據這些屬性的值對子元素進行排序。
結論
在本文中，我們學習了兩種不同的獲取 data 屬性值並根據這些屬性的值對其進行排序的方法。我們藉助程式碼示例討論了這些方法，以便在實踐中實現它們，並使用這些方法對元素的子元素進行排序。
464 次瀏覽
