資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何根據 data 屬性排序 HTML 元素？
在本文中，我們將學習如何使用 data 屬性對 HTML 文件中元素的子元素進行排序。HTML 中有很多可用的 data 屬性。我們可以使用任何這些 data 屬性對元素進行排序。在本文中，我們將使用兩種不同的 data 屬性對元素進行排序，其中一種將根據賦予它的值的長度對元素進行排序，另一種將根據數值進行排序。data 屬性如下所示：
使用 data-index 屬性。
使用 data-subject 屬性。
讓我們藉助程式碼示例詳細討論上述兩種 data 屬性的實際實現。
使用 data-index 屬性
data-index 屬性是一個以數字形式取值的屬性，它將幫助我們按照賦予此屬性的數值對元素進行排序。
語法
以下語法將向您展示如何在任何 HTML 元素中使用 data-index 屬性：
<div data-index = " numeric_value "> content of the element </div>
現在讓我們瞭解如何使用 data-index 屬性透過程式碼示例在實踐中對元素進行排序。
步驟
步驟 1 - 在第一步中，我們將向 HTML 文件新增一個數字型別的 input 元素，以從使用者那裡獲取數字輸入，並將此輸入值作為值分配給 data-index 屬性和新建立元素的文字。
步驟 2 - 在此步驟中，我們將新增一個容器元素，我們將動態地向其中追加子元素，然後根據其 data-index 屬性的數值對它們進行排序。
步驟 3 - 在下一步中，我們將新增兩個不同的按鈕元素，並將其與 onclick 事件關聯，其中第一個按鈕將子元素新增到上一步中定義的容器中，第二個按鈕將對子元素進行排序並在使用者螢幕上顯示結果。
步驟 4 - 在第四步中，將宣告一個 JavaScript 函式，其中包含將子元素新增到容器元素並將其分配給上一步中新增的第一個按鈕的 onclick 事件的邏輯。
步驟 5 - 在最後一步中，我們將定義另一個 JavaScript 函式並將其分配給第三步中定義的第二個按鈕的 onclick 事件。此函式將根據 data-index 屬性的數值對元素進行排序。
示例
下面的示例將說明如何使用 data 屬性根據數值對元素進行排序：
<!DOCTYPE html>
<html>
<body>
<h2>Sort element by numerical value of data attribute using JavaScript</h2>
<p>Enter any number of your choice:</p>
<input type = "number" id = "inp1" placeholder = "Numeric Value"><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 = "setValues()">Append element to the parent element</button>
<button id = "btn" onclick = "sortElement()">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 setValues() {
var inp1 = $("#inp1");
var val1 = inp1.val();
var num = Number(val1);
var paras = $(" <p> </p> ").text(num);
paras.addClass("childPara");
paras.attr("data-index", num);
paras.appendTo(container);
inp1.val("");
}
function sortElement() {
function cmp(x, y) {
if (x.dataset.index > y.dataset.index)
return 1;
if (x.dataset.index < y.dataset.index)
return -1;
return 0;
}
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>
在上面的示例中，我們使用了 data-index 屬性並根據每個元素的 data-index 屬性中儲存的數值對元素進行了排序。
使用 data-subject 屬性
data-subject 屬性是一個以字串形式取值的屬性，我們可以在比較器函式中比較這些字串值的長度，以根據 data 屬性中儲存的值的長度對元素進行排序。
語法
以下語法將向您展示如何在 HTML 文件中的任何元素中使用 data-subject 屬性：
<div data-subject = " string_value "> content of the element </div>
現在讓我們透過在程式碼示例中實現它來詳細討論其實際實現。
演算法
上一個示例和此示例的演算法幾乎相同，您只需執行以下更改即可根據賦予 data-subject 屬性的值的長度對元素進行排序：
新增兩個文字型別的 input 元素。
比較比較器函式的兩個引數的 dataset.subject.length，而不是 dataset.index。
透過執行上述更改，您就可以根據字串值對元素進行排序了。
示例
以下示例將解釋上述在先前演算法中的更改，並幫助您使用 data-subject 根據賦予它的值的長度對元素進行排序：
<!DOCTYPE html>
<html>
<body>
<h2>Sort HTML elements by data-attribute</h2>
<p>Enter your subject Name and any topic of that subject:</p>
<input type = "text" id = "inp1" placeholder = "Subject Name"><br><br>
<input type = "text" id = "inp2" placeholder = "Topic Name"><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 = "setValues()">Append element to the parent element</button>
<button id = "btn" onclick = "sortElement()">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 setValues() {
var inp1 = $("#inp1");
var val1 = inp1.val();
var text1 = val1;
var inp2 = $("#inp2");
var val2 = inp2.val();
var text2 = val2;
var paras = $(" <p> </p> ").text(text1 + " : " + text2);
paras.addClass("childPara");
paras.attr("data-subject", text1);
paras.appendTo(container);
inp1.val("");
inp2.val("");
}
function sortElement() {
function cmp(x, y) {
if (x.dataset.subject.length < y.dataset.subject.length)
return -1;
if (x.dataset.subject.length > y.dataset.subject.length)
return 1;
return 0;
}
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>
在此示例中，我們使用了 data-subject 屬性根據儲存在其中的值的長度對元素進行了排序。
注意 - 在以上兩個示例中，如果交換比較器函式中相互比較的值，則將按相反的順序對元素進行排序，例如，在第一個示例中按數值降序排序，在第二個示例中按字串長度降序排序。
結論
在本文中，我們討論了使用 data 屬性對元素進行排序的方法，並查看了兩個不同的排序示例，其中我們將元素按數值和字串長度順序排序。
454 次瀏覽
