使用jQuery重复元素

Question

我相信对于合适的人来说，这个问题很容易理解，但是如何使用jQuery重复一个元素呢？基本上，我希望jQuery可以无限次地重复一个内联元素，就像你使用CSS为背景纹理重复图形一样。我一直在研究 .clone() 和 .each()，但真的需要一些指点。

谢谢！

• J

- user1062823

---

对于无限次重复元素，你可能有什么实际的用途呢？ - bozdoz

嗯...我唯一的想法是在背景中使用无形文本来防止垃圾邮件机器人，但也许我错了。 - Hauleth

@bozdoz 我有一个页面的概念，其中包含重复元素和简单的CSS动画，当你将鼠标悬停在它们上面时触发。猜测“无限”的词用错了...更像是填充整个页面。 - user1062823

Answer 1

http://jsfiddle.net/gRTTJ/

Key line:

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

虽然无限循环可以实现，但它是无限的（显然），并不是特别有用。

一个稍微合理一些且可以无限运行的版本：

function repeat()
{

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

$(function () {

    setInterval(repeat, 1000);
});

- Jake Feasel

---

你的代码只会重复一次。在重复中应该也包括 setInterval(repeat, 1000); 或者你可以使用 jQuery.doTimeout。 - Hauleth

你把setInterval和setTimeout搞混了。setInterval会持续运行。 - Jake Feasel

抱歉，是我的错。现在时间有点晚了，我有些疲倦。 - Hauleth

Answer 2

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

但是那段代码会导致你的浏览器崩溃。更好的想法是将其运行可数次。

- Hauleth

---

@purmou 你确定那是真的吗？我认为他只是将文本附加到单个ID上。 - bozdoz

Answer 3

Here's what I came up with:

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()继续添加，它会像这样（而且这个不会让你的浏览器崩溃）。

- Purag

Answer 4

我相信你想要克隆一些东西，但是抛开这个不谈，这里有一个插件类型的复制/克隆示例：

给定这个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')

- Jesse

Answer 5

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/ 注意，如果未设置高度，它将成为无限循环

- Jeremy T