Question

我确信这对合适的人来说是显而易见的，但我怎样才能用jQuery重复一个元素？基本上我希望jQuery重复内联元素无数次;就像你会使用CSS重复背景纹理的图形。我一直在研究.clone（）和.each（），但可能真的使用了一些指针。

谢谢！

Ĵ

Answer 1

关键字：

$("#repeating").append($(".foobar").clone());

虽然如果你想要它无限，它将是一个无限循环（显然）并且不太有用。

一个稍微合理的版本无限运行：

function repeat()
{

   $("#repeating").append($(".foobar:first").clone());
}

$(function () {

    setInterval(repeat, 1000);
});

Answer 2

while(true) {
  $('#infinity-repeat').append('some text');
}

但是该代码会使您的浏览器崩溃。更好的想法是做好可数次。

Answer 3

Here我想出的是：

setInterval(function(){
    var length = $(".hi").length;
    if(length >= 10){
        // don't append
    } else {
        $("<div class='hi'>text</div>").appendTo("body");
    }
}, 1);

这里发生了一些事情。首先（除setInterval()之外），我们使用类hi获取元素的长度。当然，首先它将是0.然后我们检查它是否大于或等于10.如果是，我们不会附加它。否则，我们会继续追加。

这一直持续到页面上有10个具有类hi的元素为止。当然，我只是限制它，让你一瞥它是如何工作的。如果您继续使用setInterval()进行追加，则会看起来像this（而且这个版本不会让您的浏览器崩溃）。

Answer 4

var lastAppended = $("<span>some text</span>");
var repeatingArea = $("#repeating");
repeatingArea.append(lastAppended);
while (lastAppended.position().top < repeatingArea.height()) {
    lastAppended = lastAppended.clone();
    repeatingArea.append(lastAppended);
}

那应该填满重复区域。如果重复区域可以有滚动条，那么while循环中的测试会变得有点复杂，每当用户滚动时你都需要重新调用它，但想法是一样的。

编辑：这是一个jsfiddle http://jsfiddle.net/6FW4n/3/ 请注意，如果未设置高度，则它将是无限循环

Answer 5

我确定你想要克隆一些finitely但是这里除了一个插件类型的复制/克隆的例子：

鉴于此html：

<div id='duplicateme'>Duplicate This</div>

插件本身：

$.fn.duplicate = function(count, withDataAndEvents) {
    var tmp = [];
    for (var i = 0; i < count; i++) {
        $.merge(tmp, this.clone(withDataAndEvents).get());
    }
    return this.pushStack(tmp);
};

可以通过两种方式调用：

// duplicate item 5 times
$('#duplicateme').duplicate(5).appendTo('#duplicateme');

// duplicate item 5 times along with attached events
$('#duplicateme').duplicate(5, true).appendTo('#duplicateme')

用jQuery重复元素

5 个答案: