用jQuery重复元素

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

谢谢！

来源

2011-11-23 user1062823

你有什么实际的目的可以重复元素无限多次？ – bozdoz

嗯......我唯一的想法是用垃圾邮件机器人的隐形文字发送垃圾邮件背景，但也许我错了。 – Hauleth

@bozdoz我有一个重复元素页面的概念，当你将鼠标悬停在它们上面时，触发简单的CSS动画。猜猜无限是错误的词使用...更像是填写一个页面。 – user1062823

http://jsfiddle.net/gRTTJ/

重点线：

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

但如果你想让它无限的，这将是一个无限循环（明显），并没有太大的用处。运行无限

稍微更合理的版本：

function repeat() 
{ 

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

$(function() { 

    setInterval(repeat, 1000); 
});

来源

2011-11-23 21:49:47

您的代码只会重复一次。在重复中也应该'setInterval（repeat，1000）;'或者你应该使用[jQuery.doTimeout]（http://benalman.com/code/projects/jquery-dotimeout/docs/files/jquery-ba-dotimeout- js.html） – Hauleth

你让setInterval和setTimeout混淆了。 setInterval连续运行。 –

对不起，我的错。对我来说晚了一点，所以我有点累了。 – Hauleth

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

但这些代码会崩溃您的浏览器。更好的主意是做可数的时间。

来源

2011-11-23 21:50:29 Hauleth

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

@bozdoz：哎呦，嘿嘿。有时我会失明，哈哈。：P – Purag

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/ 注意，如果高度没有设置，这将是一个无限循环

来源

2011-11-23 21:59:35

我敢肯定，你想要克隆的东西finitely但抛开这里是一个例子复制/克隆的插件类型：

鉴于这个网站：

<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')

来源

2011-11-23 22:03:40 Jesse

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（并且这不会导致浏览器崩溃）。

来源

2011-11-24 06:00:46 Purag

酷！这真的有用，谢谢！ – user1062823

用jQuery重复元素

回答

相关问题