无法访问 for 循环之外的迭代数据

Question

我有许多li，每个都包含<img>标签。

<li class="pic"><img src="pic_1.jpg"></li>
<li class="pic"><img src="pic_2.jpg"></li>
<li class="pic"><img src="pic_3.jpg"></li>
<li class="pic"><img src="pic_4.jpg"></li>

一个简单的循环遍历列表项可以找到所有图像的原生宽度——是的，我知道 jQuery .each 函数也可以做到这一点。用于查找本机宽度（和高度）的代码应归功于 CSS Tricks。

picarray = [];

for (var i = 0; i < $('.pic').length; i++) {
    var theimg = new Image();
    theimg.src = $('.pic img').eq(i).attr('src');
    var picW = theimg.width;
    picarray = [picW];

    console.log(picW);
    console.log(picarray);
};

console.log(picarray[3]);

我想做的是获取迭代数据并将其转储到一个数组中，然后我可以在 for 循环之外访问该数组。我想我已经在 js 的顶部创建了一个全局变量 picarray 来执行此操作，但是当我测试代码时，数组在循环中会很好，但是当我测试并尝试访问特定项目时数组，在循环之外我只是在控制台面板中得到undefined。

如何将 for 循环吐出的迭代数据放入可以从循环外部访问的数组？

Answer 1

你的方法不对。每次迭代都覆盖数组，总长度只有1。

<script>
picarray = [];

for (var i = 0; i < $('.pic').length; i++) {
    var theimg = new Image();
    theimg.src = $('.pic img').eq(i).attr('src');
    var picW = theimg.width;
    picarray[i] = picW;

    console.log(picW);
    console.log(picarray);
};

console.log(picarray);

</script>

Answer 2

您将在每次迭代中使用长度为 1 的新数组覆盖该数组。因此，最后你只剩下数组中最后一个图像的值

变化：

picarray = [picW]; // reassigns whole variable with a new array each iteration

到

picarray.push(picW); // adds to existing array instead

Answer 3

每次循环都会创建一个新数组，因此 picarray 始终只有一个值 - 将 picarray = [picW] 更改为 picarray.push(picW)

Answer 4

如果您的代码应该将所有图片收集到数组中：

$(document).ready( function() {
  var picarray = [];

  $('.pic > img').each(function() {
    var img = new Image();
    img.src = $(this).attr('src');
    picarray.push(img);
  });
      
  alert('Thrid image source = ' + picarray[3].width);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
<li class="pic"><img src="http://www.tnetnoc.com//hotelphotos/816/41816/2241284-Hotel-Sacher-Wien-Hotel-Exterior-1-DEF.jpg" height="60" width="60"></li>
    <li class="pic"><img src="http://www.tnetnoc.com//hotelphotos/816/41816/2241284-Hotel-Sacher-Wien-Hotel-Exterior-2-DEF.jpg" height="60" width="60"></li>
    <li class="pic"><img src="http://www.tnetnoc.com//hotelphotos/816/41816/2241284-Hotel-Sacher-Wien-Hotel-Exterior-3-DEF.jpg" height="60" width="60"></li>
    <li class="pic"><img src="http://www.tnetnoc.com//hotelphotos/816/41816/2241284-Hotel-Sacher-Wien-Lobby-1-DEF.jpg" height="60" width="60"></li>