无法访问 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>

一个遍历列表项的简单 for 循环找到所有图像的原始宽度 - 是的，我知道 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 的新数组覆盖该数组。因此最后你只剩下数组中最后一张图像的值

变化：

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

到

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

Answer 2

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

Answer 3

你的做法不对。每次迭代都在覆盖数组，总长度只有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 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>

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

Can't access iterated data outside of for loop

arrays

jquery

for-loop