我想要一个循环遍历列表项系列的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粉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>
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){...})
提供的参数。