Question

我有一个像这样的'a'列表：

<div  id="page">

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

</div>

现在我必须将列表设置为HTML，但由于我要使用~500次'a'，我需要将其作为一些jquery事件的结果生成。

'a'代码的总量由SomeFunction();

给出

如何生成（例如.click）SomeFunction();给出的'a'标签的确切数量？

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

为什么需要将所有这些包装在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

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

根据您的需要多次

Answer 4

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

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

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 7

    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(" "));
    });

这就是你想要的吗？

使用Jquery动态生成“a”标签

7 个答案: