Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Jquery Arrays: Creation and Manipulation

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 170
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: