数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
