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