搜索

首页  >  问答  >  正文

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

我想要一个循环遍历列表项系列的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);
});

P粉221046425P粉221046425444 天前643

全部回复(2)我来回复

  • P粉302160436

    P粉3021604362023-09-10 15:11:24

    如果您使用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>

    回复
    0
  • P粉270891688

    P粉2708916882023-09-10 14:01:02

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

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

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

    回复
    0
  • 取消回复