数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何使用 jQuery 反转 DOM 元素数组？
DOM 元素数组是由多个相同元素组成的数组，或者是由包含相同类或选择属性的元素组成的数组。我们的任务是使用 jQuery 反转 DOM 元素数组。反转 DOM 元素数组的方法有很多，但这篇文章将讨论两种反转 DOM 元素数组的方法。
使用 for 循环
使用 reverse() 方法
现在让我们通过实际使用 jQuery 代码示例来详细讨论这两种方法。
使用 for 循环
我们可以使用 for 循环反转数组中的元素，并在第一次迭代中交换第一个和最后一个元素，然后在第二次迭代中交换第二个和倒数第二个元素，以此类推。这样，在 for 循环结束时，我们将得到一个反转后的数组。这种方法需要 O(n) 的时间和 O(1) 的额外空间来反转数组。
现在让我们通过代码示例来实际实现它，并详细了解这种方法的工作原理。
步骤
步骤 1 − 在第一步中，我们将在 HTML 文档中定义多个具有相同类的元素。
步骤 2 − 在下一步中，我们将使用 jQuery 在 JavaScript 变量中使用类选择器来获取或选择所有这些元素。
步骤 3 − 在这一步中，我们将遍历 DOM 元素数组，并交换从开头和结尾开始的相应位置的元素。
示例
下面的示例将解释如何实现上述算法以及反转 DOM 元素数组的方法 −
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2> Reversing array of DOM elements using jQuery </h2>
<p class = "my_para"> Para 1 </p>
<p class = "my_para"> Para 2 </p>
<p class = "my_para"> Para 3 </p>
<p class = "my_para"> Para 4 </p>
<p class = "my_para"> Para 5 </p>
<p class = "result1"> Text of the Paragraph tags and array elements before reversing array elements: </p>
<p class = "elements1"> </p>
<p class = "result2"> Text of the Paragraph tags and array elements after reversing array elements: </p>
<p class = "elements2"> </p>
<script>
var resultArray = $('.my_para');
var elements1 = $('.elements1');
var elements2 = $('.elements2');
var n = resultArray.length;
var j = n - 1;
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements1.append(" <b> " + val + " </b>, ")
}
for (var i = 0; i < n; i++) {
var x = resultArray[i];
resultArray[i] = resultArray[j];
resultArray[j] = x;
}
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements2.append(" <b> " + val + " </b>, ")
}
</script>
</body>
</html>
在上面的示例中，我们使用了 for 循环来反转 DOM 元素数组的元素。在输出屏幕上，您将看到反转前后数组元素的顺序发生了变化。
使用 reverse() 方法
我们可以将 jQuery 的 reverse() 方法与 jQuery 的其他方法（如 get() 和 each()）结合使用，以完成反转 DOM 元素数组元素的任务。get() 方法将获取所有相同类型的元素，然后 reverse() 方法将反转每个元素，each() 方法将遍历数组的所有元素。
让我们通过代码示例来实际了解它，并实现它以详细查看其工作原理。
上述方法和这种方法的算法几乎相同，您只需要用 reverse 方法方法替换反转数组元素的方法，而不是 for 循环方法。
示例
在这个例子中，我们在 DOM 的 $ 选择器内使用 jQuery 的 reverse() 方法和 get() 方法。我们打印数组元素值的之前和之后序列，它们将不同并且彼此反向。
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2> Reversing array of DOM elements using jQuery </h2>
<p class = "my_para"> Para 1 </p>
<p class = "my_para"> Para 2 </p>
<p class = "my_para"> Para 3 </p>
<p class = "my_para"> Para 4 </p>
<p class = "my_para"> Para 5 </p>
<p class = "result1"> Text of the Paragraph tags and array elements before reversing array elements: </p>
<p class = "elements1"> </p>
<p class = "result2"> Text of the Paragraph tags and array elements after reversing array elements: </p>
<p class = "elements2"> </p>
<script>
var resultArray = $($('.my_para').get());
var elements1 = $('.elements1');
var elements2 = $('.elements2');
var n = resultArray.length;
var j = n - 1;
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements1.append(" <b> " + val + " </b>, ")
}
resultArray = $($('.my_para').get().reverse());
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements2.append(" <b> " + val + " </b>, ")
}
</script>
</body>
</html>
结论
在本文中，我们讨论了两种不同的反转 DOM 元素数组的方法。我们通过实际使用代码示例来详细讨论并理解这两种方法。
591 次浏览
