Question

问题：我正在为一个项目创建一个分页插件。

问题：在jQuery中重复相同HTML对象的最佳方法是什么？

实施例：我已经设置了

function pagination(pageNumber){
    this.pageNumber = pageNumber;
    for ($i = 1; $i <= pageNumber; $i ++) {
    **$('#myObject').addClass('dot');**
}}

我希望能够使用my for counter来迭代**中的对象，我假设它涉及.appendTo动作，但我不知道如何绑定我的变量来控制数量。< / p>

有什么建议吗？

Answer 1

在你的循环中试试这个。

var newObject = $('#yourObject').clone()
newObject.appendTo('#targetContainer')

创建要重复的元素的克隆后，只需将其附加到目的地即可。您不需要指定任何一行作为参数的次数。这只会附加另一个元素，但循环次数会很多次。

Answer 2

你需要知道如何重复一个物体吗？使用.clone（）方法http://api.jquery.com/clone/

for ($i = 1; $i <= pageNumber; $i ++) {
  $('.myObject').clone().addClass('dot').appendTo('.someContainer');
}

请记住不要复制元素ID。

Answer 3

这听起来很奇怪，但在你追加它们之前制作html对象!!巨大的性能提升

    var divTemplateHtml = "<div id='helloWorld' class='dot'></div>";
    var divTemplate = $(divTemplateHtml);


    function pagination(pageNumber){
    // do not add elements to an attached DOM in a for loop.
        var container = $("#container-selector").detach();
// now it's detached
        for ($i = 1; $i <= pageNumber; $i ++) {
//trust me, clone it ;)  it saves headaches on other templates
            var clone = divTemplate.clone();
//i like to use this to set IDs
            clone.attr("id", clone.attr("id") +i );
//sounds weird, but attach the fresh clone to the 'detached' container
            container.append(clone);
        }
//put the container back in the DOM
        container.appendTo("#your-final-target");
    }

用jQuery重复HTML标记

3 个答案: