极客教程如何用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>
输出:
方法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>
输出:
