Dada una array de elementos DOM, la tarea es invertir esta array usando jQuery. Hay dos enfoques que se pueden tomar para lograr esto:
Enfoque 1: Uso de métodos jQuery incorporados como get() , reverse() y each() . En primer lugar, seleccione todos los elementos DOM requeridos utilizando el método get() que devuelve una array de JavaScript. Luego, el método JavaScript nativo reverse() se usa para invertir los elementos DOM de la array. Finalmente, el método each() itera sobre cada elemento DOM de la array invertida.
Ejemplo:
HTML
<!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>
Producción:
Enfoque 2: usar un pequeño complemento de jQuery . El complemento jQuery.fn.reverse = [].reverse se puede usar para invertir una array de elementos DOM cuando se combina con el método each() como se explicó en el enfoque anterior.
Ejemplo:
HTML
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA