for in loop affecting only last element of array,I want my code to work on each element of array

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>

FYI, a single number isn't a valid class selector. jQuery handles it, but it defaults to its non-standard, slower selector engine. — , Jul 17 '16 at 19:24
Explanation [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — charlietfl, Jul 17 '16 at 19:26
There should be a special tag in SO `closures-in-loops`. The same mistake over and over. [Creating closures in loops: A common mistake](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake) — Alex Kudryashev, Jul 17 '16 at 19:40
The problem is that the variable `i`, within each of the anonymous functions, is bound to the same variable outside of the function... See my solution — Yosvel Quintero, Jul 17 '16 at 19:51

Roko C. Buljan · Accepted Answer · 2016-07-17T19:27:56.120

Remove the for loop and crate a selector from your array using join()

jQuery(function( $ ){

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

  $(array.join(",")).click(function(){
     $(this).html("Hello");
  });

});

Currently you have an array

[".1",".2",".3",".4",".5",".6",".7",".8",".9"]

but you need a selector

".1,.2,.3,.4,.5,.6,.7,.8,.9"

therefore use .join(",")

jQuery(function( $ ){
  
  var array=[".1",".2",".3",".4",".5",".6",".7",".8",".9"];


  $(array.join(",")).click(function(){
     $(this).html("Hello");
  });

  
});

[class^=col-]{background:#eee;}

<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>

Also note that using Number as class is invalid. Will work in JS bul will fail in CSS. (P.S: ID as Number on the other hand is valid in HTML5)

If I do it,then all elements will be processed by for in loop? — Uzma Khan, Jul 17 '16 at 19:26
No need to use `array.join()` because the problem is that the variable i, within each of the anonymous functions, is bound to the same variable outside of the function... See my solution — Yosvel Quintero, Jul 17 '16 at 19:49
@YosvelQuintero no need to use `for` loop at all. `$()` is already a collection of elements. See my solution. — Roko C. Buljan, Jul 17 '16 at 19:51
The easiest and fast way: `$('.col-md-4').on('click', function() {$(this).html(0)});` — Yosvel Quintero, Jul 17 '16 at 22:00
Yes, but not in the case where i.e: you're building an array of specific selectors like i.e: `[".1",".8","#foo"]` — Roko C. Buljan, Jul 17 '16 at 22:14

Yosvel Quintero · Answer 2 · 2016-07-17T21:58:18.123

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:

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

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

<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);
});

Uzma Khan · Answer 3 · 2016-07-17T19:34:57.340

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
   });
   }

edited Jul 17 '16 at 19:34

answered Jul 17 '16 at 19:24

Uzma Khan

139
1
3
14

for in loop affecting only last element of array,I want my code to work on each element of array

3 Answers3