Есть N. Необходимо при помощи jQuery добавить N ссылок <a href=""></a>
с id от 1 до N
Т.е., если N = 3
- добавить 3 ссылки:
<a href="/page1"></a>
<a href="/page2"></a>
<a href="/page3"></a>
Как это сделать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсть N. Необходимо при помощи jQuery добавить N ссылок <a href=""></a>
с id от 1 до N
Т.е., если N = 3
- добавить 3 ссылки:
<a href="/page1"></a>
<a href="/page2"></a>
<a href="/page3"></a>
Как это сделать?
Давайте начнем с того, что библиотека JQuery используется в первую очередь для работы с DOM деревом страницы. Поэтому для работы с тем, что этого не касается, она практически не используется.
Что бы решить задачу, надо знать чистый JS, а не JQuery. Можно использовать простой цикл или как вариант более сложные методы:
Array.apply(null, Array(5)).map(function (_, i) {return i;}).map(function(item){
return "<a href=\"/page"+(item+1)+"\"></a>";
})
Array.from(Array(5).keys());
?
function generateLinks(n){
var str = '';
for(var i = 1; i <= n; i++){
str = str + '<a href="/page'+i+'">'+i+'</a>';
}
$('#block').append(str); // это если добавить в конец какого-то блока
$('#block').html(str); // это если заменить содержимов блока
}
Довольно просто, хотя прежде чем прогать неплохо бы мануальчик открыть
var n = 'тут количество ссылок';
for(var i=1; i<n; i++){
var newLink = "<a href='page"+i+"'>Ковычка малех не там стояла</a>";
$('Тег в который вы хотите вставить код').append(newLink);
}
Создать массив из N
пустых элементов. Каждый элемент заменить на HTML с подставленным нужным значением числа от 1 до N. Склеить элементы массива в одну строку через некий разделитель. Вставить весь HTML в нужном месте документа:
var N = 3;
var tmpl = '<a href="/page%ID%">страница %ID%</a>'; // темплейт
// вместо %ID% подставим 1...3
var html = (Array.apply(null, Array(N))) // массив из N пустых элем.
.map((e,i)=>{return tmpl.replace( /%ID%/g, i+1)}) // заменить каждый
// на tmpl с подставленным нужным значением ID
// i считается от 0 до N-1, поэтому заменяем на i+1
.join( "<br>\n") // объединить в одну строку через разделитель
;
$( '#out').html( html); // вставить готовый HTML в нужном месте
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="out"></div>
Еще один вариант с использованием функций для работы с массивами:
и следующими функциями jQuery:
var N = 7;
function createLinks(n) {
var links = [];
links.length = n;
return links.fill('<a>')
.reduce((acc, cur) => acc.add(cur), $())
.attr('href', function(i) {
return '/page' + (i + 1)
})
.text(function(i) {
return 'link ' + (i + 1)
})
}
$('#out').append(createLinks(N)); // вставить готовый HTML в нужном месте
a {
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="out"></div>