Question: I am trying to change html of each class that is contained in my array. But for(var i in array) loop only processing the last array element.How to make it work for each element of array.Here is my code:

```
$(document).ready(function() {
    var a = [],
        array = [".1", ".2", ".3", ".4", ".5", ".6", ".7", ".8", ".9"];
    // a.push($(array[i]).html());
    for (var i in array) {
        $(array[i]).click(function() {
            $(array[i]).html(0);
        });
    }
});

```

See the problem here <http://codepen.io/meow414/pen/rLJaPJ> (its code may change as I will be trying to solve it). HTML code is here :

```
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-md-10">
            <div class="row">
                <div class="1 col-xs-4 col-md-4">1</div>
                <div class="2 col-xs-4 col-md-4">2</div>
                <div class="3 col-xs-4 col-md-4">3</div>
            </div>
            <div class="row">
                <div class="4 col-xs-4 col-md-4">4</div>
                <div class="5 col-xs-4 col-md-4">5</div>
                <div class="6 col-xs-4 col-md-4">6</div>
            </div>
            <div class="row">
                <div class="7 col-xs-4 col-md-4">7</div>
                <div class="8 col-xs-4 col-md-4">8</div>
                <div class="9 col-xs-4 col-md-4">9</div>
            </div>
        </div>
    </div>
</div>

```

Answer: 
The problem is that the variable `i`, within each of the anonymous functions, is bound to the same variable outside of the function.

You can use the `this` reference in the event handler function:

```js
var array = [".1", ".2", ".3", ".4", ".5", ".6", ".7", ".8", ".9"];

for (var i in array) {
    $(array[i]).on('click', function() {
        $(this).html(0);
    });
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-md-10">
            <div class="row">
                <div class="1 col-xs-4 col-md-4">1</div>
                <div class="2 col-xs-4 col-md-4">2</div>
                <div class="3 col-xs-4 col-md-4">3</div>
            </div>
            <div class="row">
                <div class="4 col-xs-4 col-md-4">4</div>
                <div class="5 col-xs-4 col-md-4">5</div>
                <div class="6 col-xs-4 col-md-4">6</div>
            </div>
            <div class="row">
                <div class="7 col-xs-4 col-md-4">7</div>
                <div class="8 col-xs-4 col-md-4">8</div>
                <div class="9 col-xs-4 col-md-4">9</div>
            </div>
        </div>
    </div>
</div>
```

But the easiest and fast way according to your html is: 

```
$('.col-md-4').click(function() {
    $(this).html(0);
});

```
forEach(); worked better. Solution:

```
    $(document).ready(function(){
var a=[],array=[".1",".2",".3",".4",".5",".6",".7",".8",".9"];
   // a.push($(array[i]).html());
  array.forEach(function(i){ $(i).click(function(){
    $(i).html(0);
   });
   }
   );

  });

```

Or

```
for(var i in array){
  $(array[i]).click(function(){
    $(this).html(0); //this to take current instance
   });
   }

```