Titre réécrit : Faire une boucle sur des listes HTML

Question

Je veux un code JS qui parcourt une série d'éléments de liste et, pour chaque élément de liste, il stocke une valeur d'attribut unique (dans ce cas, le href), puis l'insère dans une autre au sein du même élément de liste. Dans un élément (dans dans ce cas, le bouton). Mon code JS actuel ne fonctionne que sur le premier élément de la liste, pas sur toute la série. Mon approche peut-elle être modifiée ou doit-elle être modifiée ?

<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

Ce sera plus facile à suivre si vous utilisez un nœud foreach et obtenez et définissez les propriétés requises à partir de là

  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

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

Voir https://jsfiddle.net/qkd37rsu/

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