纯JavaScript更改url循环
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯JavaScript更改url循环相关的知识，希望对你有一定的参考价值。
var list = document.querySelectorAll(".list a");
for(var b = 0; b < list.length; b++)
var _list2 = document.querySelectorAll(".list2 a");
for(var a = 0; a < _list2.length; a++)
list[b].href = _list2[a].href;
<div class="list">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="list2">
<ul>
<li><a href="https://www.sample_a.com"></a></li>
<li><a href="https://www.sample_b.com"></a></li>
<li><a href="https://www.sample_c.com"></a></li>
<li><a href="https://www.sample_d.com"></a></li>
<li><a href="https://www.sample_e.com"></a></li>
</ul>
</div>
<h2>Expected Result</h2>
<div class="list">
<ul>
<li><a href="https://www.sample_a.com"></a></li>
<li><a href="https://www.sample_b.com"></a></li>
<li><a href="https://www.sample_c.com"></a></li>
<li><a href="https://www.sample_d.com"></a></li>
<li><a href="https://www.sample_e.com"></a></li>
</ul>
</div>如何通过循环将“ .list空的超链接替换为.list2超链接”？我对这个循环感到困惑。当我使用此循环时，我将获得所有超链接的最后一个超链接。如何解决？
答案
这应该工作
var list = document.querySelectorAll(".list a");
var _list2 = document.querySelectorAll(".list2 a");
for(var b = 0; b < list.length; b++)
list[b].href = _list2[b].href;
另一答案
您不需要内部循环，因为您只想替换与第二个列表在第一个列表相同索引处的元素的href：
var list = document.querySelectorAll(".list a");
var _list2 = document.querySelectorAll(".list2 a");
if (list.length === _list2.length) // check arrays are same length
for (var a = 0; a < list.length; a++)
list[a].href = _list2[a].href; // you just want to replace the href at the same index
<div class="list">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="list2">
<ul>
<li><a href="https://www.sample_a.com"></a></li>
<li><a href="https://www.sample_b.com"></a></li>
<li><a href="https://www.sample_c.com"></a></li>
<li><a href="https://www.sample_d.com"></a></li>
<li><a href="https://www.sample_e.com"></a></li>
</ul>
</div>另一答案
之所以总是从第二个列表中获取最后一个链接，是因为您要遍历第二个列表中的每个项目，对于第一个列表中的每个项目。将设置的值将始终是循环中的最后一个：第二个列表中的最后一个项目。
您需要做的是仅遍历第一个列表，并使用相同的索引访问第二个列表中的元素。您需要确保第二个列表至少与第一个列表一样长。
此外，正如他们的注释中提到的evolutionxbox：您不需要CDATA注释（在html和JS中）。
var list = document.querySelectorAll('.list a');
var list2 = document.querySelectorAll('.list2 a');
if (list.length <= list2.length)
for (var i = 0; i < list.length; ++i)
list[i].href = list2[i].href;
<div class="list">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="list2">
<ul>
<li><a href="https://www.sample_a.com"></a></li>
<li><a href="https://www.sample_b.com"></a></li>
<li><a href="https://www.sample_c.com"></a></li>
<li><a href="https://www.sample_d.com"></a></li>
<li><a href="https://www.sample_e.com"></a></li>
</ul>
</div>另一答案
只需经过一个循环
var list = document.querySelectorAll(".list a");
var _list2 = document.querySelectorAll(".list2 a");
if (list.length === _list2.length)
for (var a = 0; a < _list2.length; a++)
list[a].href = _list2[a].href;
另一答案
使用扩展运算符...和forEach的替代方法。（CSS仅用于打印href属性的值）
var l1_a = [...document.querySelectorAll('.list a')];
var l2_a = [...document.querySelectorAll('.list2 a')];
l2_a.forEach(function(el, i)
l1_a[i].href = el.href;
);a[href^=http]::before
content: attr(href);
<div class="list">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="list2">
<ul>
<li><a href="https://www.sample_a.com"></a></li>
<li><a href="https://www.sample_b.com"></a></li>
<li><a href="https://www.sample_c.com"></a></li>
<li><a href="https://www.sample_d.com"></a></li>
<li><a href="https://www.sample_e.com"></a></li>
</ul>
</div>另一答案
我会尝试这样做
HTML
<div class="list">
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>
</div>
<div class="list2">
<ul>
<li><a href="https://www.sample_a.com">1</a></li>
<li><a href="https://www.sample_b.com">2</a></li>
<li><a href="https://www.sample_c.com">3</a></li>
<li><a href="https://www.sample_d.com">4</a></li>
<li><a href="https://www.sample_e.com">5</a></li>
</ul>
</div>
JS：
const list = document.querySelectorAll(".list a");
for(let b = 0; b < list.length; b++)
const _list2 = document.querySelectorAll(".list2 ul a");
list[b].href = _list2[b].href;
以上是关于纯JavaScript更改url循环的主要内容，如果未能解决你的问题，请参考以下文章
纯 javascript 文本滑块，可更改 php 中的文本显示