Генерация «а» метки на лету, используя 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) точное количество «а» теги, данное 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); 
}); 

Example fiddle

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

Answer 2

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

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

Answer 3

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

Answer 4

// 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 5

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 6

​ 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 7

Зачем вам нужно обернуть все это в 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 на создании каждого элемента (использование фрагментов документа для создания коллекции), чтобы избежать REflow
• Нахождение "страницы" на каждый добавить

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