用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重複元素

回答

相關問題