for in 循环仅影响数组的最后一个元素，我希望我的代码可以处理数组的每个元素[重复]答案

【问题标题】：for in loop affecting only last element of array,I want my code to work on each element of array [duplicate]for in 循环仅影响数组的最后一个元素，我希望我的代码可以处理数组的每个元素[重复]
【发布时间】：2016-07-17 19:19:50
【问题描述】：

我正在尝试更改数组中包含的每个类的 html。但是 for(var i in array) 循环只处理最后一个数组元素。如何使它适用于数组的每个元素。这是我的代码：

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

在这里查看问题http://codepen.io/meow414/pen/rLJaPJ（它的代码可能会改变，因为我将尝试解决它）。 HTML 代码在这里：

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

【问题讨论】：

仅供参考，单个数字不是有效的类选择器。 jQuery 处理它，但它默认使用其非标准、较慢的选择器引擎。
解释JavaScript closure inside loops – simple practical example
在 SO closures-in-loops 中应该有一个特殊的标签。一遍又一遍地犯同样的错误。 Creating closures in loops: A common mistake
问题是变量i，在每个匿名函数内，都绑定到函数外的同一个变量...看我的解决方案

标签： javascript jquery html css arrays

【解决方案1】：

删除 for 循环并使用 join() 从数组中创建一个选择器

jQuery(function( $ ){

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

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

});

目前你有一个数组

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

但你需要一个选择器

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

因此使用.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>

另请注意，使用 Number 作为类是无效的。将在 JS 中工作 bul 在 CSS 中将失败。（P.S：另一方面，ID 作为 Number 在 HTML5 中有效）

【讨论】：

如果我这样做，那么所有元素都会被for in循环处理？
@UzmaKhan 删除 for 循环。查看我的编辑。
不需要使用array.join()，因为问题是每个匿名函数内的变量 i 都绑定到函数外的同一个变量...查看我的解决方案
@YosvelQuintero 根本不需要使用for 循环。 $() 已经是元素的集合。查看我的解决方案。
最简单快捷的方法：$('.col-md-4').on('click', function() {$(this).html(0)});

【解决方案2】：

问题是每个匿名函数内的变量i 都绑定到函数外的同一个变量。

您可以在事件处理函数中使用this 引用：

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>

但根据您的 html，最简单快捷的方法是：

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

【讨论】：

【解决方案3】：

forEach();工作得更好。解决方案：

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

  });

或者

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

【讨论】：