重新寫的標題：對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){...})提供的參數。