jQuery.makeArray() is used to transforms any array like object to JavaScript Array. This function is useful for making an element into a array list. Here in this line of code i used one div for explaining the box, in which the data of LI can be drop when it is passed into array. The "array" variable would contain the data of LI, this value is append to the box in the form of List.
The array.reverse(); function is used for making the list in reverse order.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Jquery Utility : Looping over objects using $.each() </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
var array = $.makeArray(document.getElementsByTagName("li"));
array.reverse();
$(array).appendTo(".box");
});
});
</script>
<style>
body{font-family:Verdana; color:#444;}
.box{height:200px;width:200px;border:5px solid #fa4b2a;float:left;background-color:#44c767;color:#fff;font-family:Verdana; margin:5px;
box-shadow:5px 5px 5px #444; padding:10px 20px;}
ul li{margin-left: 10px;}
</style>
</head>
<body>
<h3>Create an Array from the List elements and then Reverse it</h3>
<ul>
<li>First</li>
<li>Second</li>
<li>Thrid</li>
<li>Fourth</li>
</ul>
<button>Click Here</button><br>
<div class="box"></div>
</body>
</html>
Go through the below link for seeing the result of this code.
0 Comment(s)