重新写的标题：对HTML列表进行循环遍历

Question

我想要一个循环遍历列表项系列的JS代码，对于每个列表项，它会存储一个唯一的属性值（在这种情况下，是href），然后将其插入到同一列表项内的另一个元素中（在这种情况下，是按钮）。我现在的JS代码只对第一个列表项起作用，而不是整个系列。我的方法能调整一下吗，还是需要进行修改？

<li class="productgrid--item">
  <a class="productitem--image-link" href="www.link_one.com">link one</a>
  <button class="atc-button--text">button one</button>
</li>
<li class="productgrid--item">
  <a class="productitem--image-link" href="www.link_two.com">link two</a>
  <button class="atc-button--text">button two</button>
</li>
<li class="productgrid--item">
  <a class="productitem--image-link" href="www.link_three.com">link three</a>
  <button class="atc-button--text">button three</button>
</li>

document.querySelectorAll('.productgrid--item').forEach(function(node) {
  var anchorHref = document.querySelector('.productitem--image-link').getAttribute('href');
  var addToCart = document.querySelector('.atc-button--text');
  addToCart.setAttribute('data', anchorHref);
});

Answer 1

如果您使用foreach节点并从那里获取和设置所需的属性，那么跟随会更容易

  document.querySelectorAll('.productgrid--item').forEach(function(node) {
  var anchorHref = node.querySelector('.productitem--image-link').getAttribute('href');
  var addToCart = node.querySelector('.atc-button--text');
  addToCart.setAttribute('data', anchorHref);
  console.log(addToCart)
});
 
  

<li id='a' class="productgrid--item">
  <a id='a1' class="productitem--image-link" href="www.link_one.com">link one</a>
  <button class="atc-button--text">button one</button>
</li>
<li id='b' class="productgrid--item">
  <a class="productitem--image-link" href="www.link_two.com">link two</a>
  <button class="atc-button--text">button two</button>
</li>
<li id='c' class="productgrid--item">
  <a class="productitem--image-link" href="www.link_three.com">link three</a>
  <button class="atc-button--text">button three</button>
</li>

Answer 2

在forEach()中，你应该使用node.querySelector()而不是document.querySelector()。

请参见https://jsfiddle.net/qkd37rsu/

document.querySelector()在整个文档树中选择并返回第一个匹配的元素，而node.querySelector()仅在node元素的子树中搜索（并返回第一个匹配的元素）。请注意，node只是由forEach(function(node){...})提供的参数。