时间戳

首页 > 解决方案 > 如何从 JS for 循环中获取数组？

javascript - 如何从 JS for 循环中获取数组？

问题描述

HTML有两部分，我想从第一部分获取href，然后在第二部分将它们用于img src。

const links = document.getElementsByClassName('myImg');	
for (let i=0; i <links.length; i++) {
    let classValue = [ ];
    classValue += links[i].getAttribute('href');

	myDiv = document.getElementsByClassName('myDiv');
	for (let i=0; i<myDiv.length; i++) { 
	    const myImg = document.createElement("IMG");
	    myImg.setAttribute('src', 'classValue[i]');
	    myDiv[i].appendChild(myImg);
	}
}
<a class="myImg" href="1.jpg"> 1.jpg </a>
<a class="myImg" href="2.jpg"> 2.jpg </a>
<a class="myImg" href="3.jpg"> 3.jpg </a>

<div class="myDiv"> </div>
<div class="myDiv"> </div>
<div class="myDiv"> </div>

此代码不起作用。

我想我不太了解 JS for loop，我从第一部分得到的结果 - “classValue”，看起来不对。

我认为“classValue”不是一个数组，所以不能在第二部分使用它。

我怎样才能得到一个循环数组？

有人可以为我解释一下。

标签： javascriptfor-loop

解决方案

用于document.querySelectorAll()获取.myDiv元素的 NodeList。对 执行相同.myImg操作，并使用 迭代 NodeList NodeList.forEach()。从每个链接中获取 href，生成 img 标签，并将其附加.myDiv到相同的索引中：

const myDiv = document.querySelectorAll('.myDiv');
const links = document.querySelectorAll('.myImg')
  .forEach((link, i) => {
    const myImg = document.createElement("IMG");
    myImg.setAttribute('src', link.getAttribute('href'));
    myDiv[i].appendChild(myImg);
  });
<a class="myImg" href="https://picsum.photos/100?1"> 1.jpg </a>
<a class="myImg" href="https://picsum.photos/100?2"> 2.jpg </a>
<a class="myImg" href="https://picsum.photos/100?3"> 3.jpg </a>

<div class="myDiv"> </div>
<div class="myDiv"> </div>
<div class="myDiv"> </div>

如何修复你的代码（见评论）：

const links = document.getElementsByClassName('myImg');
const classValue = []; // define classValue outside of the loop, so you won't re-init it

for (let i = 0; i < links.length; i++) {
  classValue.push(links[i].getAttribute('href')); // push the items to classValue instead of concating them as strings.
}

// moved myDiv's handling outside of the links loop
const myDiv = document.getElementsByClassName('myDiv');
for (let i = 0; i < myDiv.length; i++) {
  const myImg = document.createElement("IMG");
  myImg.setAttribute('src', classValue[i]); // get the src from classValue
  myDiv[i].appendChild(myImg);
}
<a class="myImg" href="https://picsum.photos/100?1"> 1.jpg </a>
<a class="myImg" href="https://picsum.photos/100?2"> 2.jpg </a>
<a class="myImg" href="https://picsum.photos/100?3"> 3.jpg </a>
<div class="myDiv"> </div>
<div class="myDiv"> </div>
<div class="myDiv"> </div>

推荐阅读