資料結構
網路
關係型資料庫管理系統 (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 次瀏覽
