如何用jQuery实现DOM元素的反向排列

给定一个DOM元素的数组，任务是用jQuery来反转这个数组。有两种方法可以实现这个目的。

方法1：使用内置的jQuery方法，如get(), reverse()和each()。首先，使用get()方法选择所有需要的DOM元素，返回一个JavaScript数组。然后，本地JavaScript方法reverse()被用来反转数组的DOM元素。最后，each()方法对反转数组中的每个DOM元素进行迭代。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <title>
        Reverse array of DOM elements using jQuery
    </title>
      
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
  
        p {
            font-weight: bold;
            font-size: 1.5rem;
        }
  
        h1 {
            color: green;
            font-size: 2.5rem;
        }
  
        button {
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <p>Geek 1</p>
    <p>Geek 2</p>
    <p>Geek 3</p>
    <p>Geek 4</p>
    <p>Geek 5</p>
  
    <script type="text/javascript">
        (("p").get().reverse()).each(function (i) {
            $(this).text("Geek " + ++i);
        });
    </script>
</body>
  
</html>

输出:

如何用jQuery实现DOM元素的反向排列？

方法2：使用一个小的jQuery插件。插件jQuery.fn.reverse = [].reverse可以用来反转DOM元素的数组，当与前面的方法中讨论的each()方法结合使用。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <title>
        Reverse array of DOM elements using jQuery
    </title>
      
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
  
        p {
            font-weight: bold;
            font-size: 1.5rem;
        }
  
        h1 {
            color: green;
            font-size: 2.5rem;
        }
  
        button {
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <p>Geek 1</p>
    <p>Geek 2</p>
    <p>Geek 3</p>
    <p>Geek 4</p>
    <p>Geek 5</p>
  
    <script type="text/javascript">
        .fn.reverse = [].reverse;
        ("p").reverse().each(function (i) {
            $(this).text("Geek " + ++i);
        });
    </script>
</body>
  
</html>