Создание тегов «а» на лету с помощью Jquery

Question

У меня есть список «а», как этот:

<div  id="page">

 <a href="#">2</a>
 <a href="#">3</a>
 <a href="#">4</a> 

</div>

На данный момент я должен установить список как HTML, но так как я собираюсь использовать ~ 500 раз 'a', мне нужно, чтобы он был сгенерирован в результате некоторого события jquery.

Общее количество тегов 'a' определяется как SomeFunction();

Как я могу сгенерировать (например, на .click) точное количество тегов 'a', заданных SomeFunction();?

ps html-номера также должны быть сгенерированы.

Answer 1

Предполагая, SomeFunction() просто возвращает целое число:

$("#myButton").click(function() {
    var count = SomeFunction();
    var aElements = "";

    for (var i = 0; i < count; i++) {
        aElements += "<a href=\"#\">" + i + "</a>";
    }

    $("#page").append(aElements);
});

Пример скрипки

НЕ звоните append() 500 раз, как другие предлагали - это будет невероятно медленно.

Answer 2

Зачем вам нужно оборачивать все это в jQuery, поскольку все это можно легко и эффективно создать, открыв сам DOM?

function SomeFunction( len ) {
    var i,
        a,
        coll = document.createDocumentFragment();
        for (i = 1; i <= len; i+=1) {
           a =  document.createElement("a");
           a.href = "#";
           a.appendChild(document.createTextNode( i ));
           coll.appendChild( a );            
        }
   document.getElementById("page").appendChild( coll );
}

    SomeFunction(5);

Несколько вещей, которые вы не делаете хочу сделать:

• Изменение DOM при создании каждого элемента (используйте фрагменты документа для создания коллекции), чтобы избежать перекомпоновки
• Поиск «страницы» на каждомдобавить

пример: http://jsfiddle.net/ShvUc/

Answer 3

​    function getATagCount()
    {
    return 100;
     }


    $("<click on what>").click(function()
    {
       var aArray=[];
    for(var i=0;i<getATagCount();i++)
    {
       aArray.push('<a href="#">'+i+'</a>');
    }   
    $("#page").append(aArray.join(" "));
    })​;​

это то, что вы хотите?

Answer 4

function generateAnchors(count){
    var target = $('#page'), str='';
    for(var i = 0; i < count; i+=1){
        str += "<a href='#'>" + i + "</a>";
    }
    target.empty().append(str);
}

Answer 5

// Returns an array with num links
function createLinks(num) {
  var links = [];
  for(var i = 0; i < num; i++) {
    links.push($("<a>").attr("href", "#").text(i));
  }
  return links;
}

// When someButton is clicked
$(someButton).on("click", function() {
  // Create as many links as specified by SomeFunction and append them to #page
  $("#page").append(createLinks(SomeFunction()));
});

Answer 6

$('#myButton').click(function(){
  var number = SomeFunction();
  for(var i=0; i<number; i++){
    $('#page').append('<a href="whatever.com">Text here</a>');
  }
});

Answer 7

$('#page').append($('<a>...</a>'));

столько раз, сколько вам нужно