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。

<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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: