主页 / 问题 / 742388
Accepted
Денис
Asked:2020-11-09 20:32:37 +0000 UTC2020-11-09 20:32:37 +0000 UTC

如何从数组值创建链接

  • 772

有一个任意长度的数组，即 每次其中的值都不同，它们的数量也不同。
您需要在页面上创建与<a></a>数组中的值一样多的链接。他们的地址应该是数组中的值。

例子：

var mass = [1, 123, 3, 7];

<div id="link_box"></div>

您应该得到以下信息：

<div id="link_box">
    <a href="1"></a>
    <a href="123"></a>
    <a href="3"></a>
    <a href="7"></a>
</div>

怎么做？

javascript

3 个回答

  1. Best Answer

    我们从 中创建一个元素数组<a>（或者更确切地说是 jQuery 包装器）mass，然后将它们添加到#link_box：

    var mass = [1, 123, 3, 7];
var links = mass.map(function(href) {
  return $("<a>", { href: href, text: href });
});
$("#link_box").append(links);
    a {
  display: block;
}
    <div id="link_box"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    text: href添加以说明示例。

    • 4

  2. 或者一个没有jquery的稍微简单的例子

    HTML：

    js：

    var mass = [1, 123, 3, 7];
var res;
for (var i of mass) {
 if (res !== undefined) {
     res += '<a href="' + i + '">' + i + '</a>';
   } else {
     res = '<a href="' + i + '">' + i + '</a>';
   }
}
var resDiv = document.getElementById("link_box");
if (resDiv) {
  resDiv.innerHTML = res;
}

    https://jsfiddle.net/e1ceyfev/1/

    • 0 

  3. var links = ['https://ya.ru', 'https://google.com', 'https://mail.ru'];
var a = document.createElement('a');
for (let i = 0; i < links.length; i++) {
  link = a.cloneNode();
  link.href = links[i];
  link.innerHTML = links[i];
  link.className = 'denis';
  document.querySelector('#wrapper').appendChild(link);
}
    .denis{
  margin: 22px;
}
    <div id="wrapper"></div>

    • 0

相关问题