Speed up development with full-stack environments for every branch.

Learn More

How to use jQuery for each function

Forked from How to use the jQuery UI Slider.

575 Runs 5457 Views 733 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>How to use jQuery for each function</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin-top:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }

        .input{
            padding: 3px;
        }
        
        .box{
            margin:50px auto;
            width:400px;
            height:100px;
            color:#333;
            padding:10px;
            border: 1px solid #999;
        }

    </style>


</head>
<body>
    <input class="button" type="button" value="Run .each() method " />
    
    <div class="box"></div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
        var numbers = [1, 2, 3, 4, 5, 6, 7];

        //When DOM loaded we attach click event to button
        $(document).ready(function() {

            //button is clicked
            $('.button').click(function(){
                
                //reset counter
                var i = 0;

                //with each numbers we update the box content
                $.each(numbers, function(){
                    i++;

                    //'this' is local varible so we store it in current
                    var current = this;

                    //delay the update for 50ms*counter
                    window.setTimeout(function(){

                        //update box content
                        $('.box').html($('.box').html() + ' ' + current);
                    
                    },50*i);
                });  
            
            });

        });

    </script>

</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).