2

Имеется массив произвольной длины, т.е. каждый раз значения в нем разные и их кол-во - тоже.
Нужно создать на странице столько ссылок <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>

Как это сделать?

3 ответа 3

4

Создаём массив <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 добавлено для наглядности примера.

1
  • спасибо большое!
    – Денис
    Commented 9 нояб. 2017 в 12:53
0

Либо чуть более простой пример без 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/

2
  • , да, не заметил поправил
    – StereoFlo
    Commented 9 нояб. 2017 в 12:59
  • спасибо! Без Jquery тоже пригодится!
    – Денис
    Commented 10 нояб. 2017 в 4:01
0

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>

6
  • Большое спасибо! Тоже все возьму на заметку!
    – Денис
    Commented 10 нояб. 2017 в 4:00
  • кстати вот интересно, а можно в эту конструкцию добавить все ссылкам один класс?
    – Денис
    Commented 10 нояб. 2017 в 4:33
  • Денис, можно)))
    – Air
    Commented 10 нояб. 2017 в 5:58
  • спасибо большое! =) К сожалению массивы - моя слабая сторона. Пошел просвещаться дальше)
    – Денис
    Commented 10 нояб. 2017 в 6:01
  • Вообще, чтото советовать дело не хорошее))), но посоветую...))) 1) - посмотри это - youtube.com/… 2) - потом это - youtube.com/… со всем уважением к лектору, но дядька нудный, но подает все профессионально. А когда будешь понимать общюю картину - youtube.com/… и вот это - youtube.com/…
    – Air
    Commented 10 нояб. 2017 в 6:17

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.