添加HTML元素來動態創建div在JavaScript或jQuery

我已經通過在我的asp.net mvc應用程序中的JavaScript創建動態div。這是在一個for循環中創建和我保持每id作爲指標值：添加HTML元素來動態創建div在JavaScript或jQuery

for (j = 1; j <= count; j++) { 
    $("<div id=" + j + "> Step " + j + "</div>"). 
     hide().appendTo("#parentDiv").fadeIn(); 
}

現在，我想新的元素添加到這些div，在同一個for循環。但是當我要附加它時，我沒有得到當前的索引div，以便我可以追加它。簡而言之，我想動態地在同一個循環內動態創建div元素的循環中呈現html元素。我如何實現這一目標？ 編輯： 看到真實的情景是這樣的。如何實現？

for (j = 1; j <= count; j++) { 
    $("<div id=" + j + "> Step " + j + "</div>").hide().appendTo("#parentDiv").fadeIn(); 
        for (i = 1; i <= count; i++) { 
          $("<div id=" + i + "> Data of column " + i + "</div>"). 
         hide().appendTo("#"+j).fadeIn(); 
         } 

}

來源

2011-02-04 Red Swan

只是一個供參考：即以數字開頭的ID是無效的HTML。 – 2011-02-04 10:41:39

@Andy E只是補充說，這個工作，直到XHTML 1.0，但它是有效的HTML5 – Sotiris 2011-02-04 10:46:04

檢查我更新的代碼 – 2011-02-04 14:10:28

<script src="jquery.js"></script> 
<style> 
#hello{ 
    height: 100px; 
    width: 500px; 
    background: blue; 
} 

.small{ 
    margin-top: 10px; 
    height: 60px; 
    width: 500px; 
    background: red; 
} 

.smallest{ 

    margin-top: 10px; 
    height: 10px; 
    width: 500px; 
    background: green; 

} 
</style> 
<script> 
$(function(){ 
for (j = 1; j <= 5; j++) { 

    var div = $("<div></div>").attr({"id": "div"+j , 'class': 'small'}).appendTo($('#hello')); 
    //create some variable and add to var div 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    } 




}); 
</script> 
<div id="hello"></div>

來源

2011-02-04 10:48:14

這會工作。

var count = 10 
for (j = 1; j <= count; j++) { 
    $("<div id=a" + j + "> Step " + j + "</div>").hide().appendTo("#parentDiv").fadeIn(); 
    $('#a' + j).html("test" + j); 
}

來源

2011-02-04 10:47:17 michaelalm

添加了「a」，因爲安迪é說ids以數字開頭是無效的。雖然不是很確定。但我反正加了 – michaelalm 2011-02-04 10:49:37

首先，您不應該只將數字分配給您的ID，有效的ID以字母字符開頭。您應該能夠在腳本中稍後使用它們各自的ID引用這些新對象。你的問題的其餘部分是神祕的...

要小心，如果你試圖附加事件到這些，你必須使用live（）方法。經典bind（）或其快捷方式click（），hover（）等將不能在動態添加的元素上工作。

HTH

來源

2011-02-04 10:47:46 Capsule

你可能想看看這個

： http://api.jquery.com/live/

來源

2011-02-04 10:51:58 Shrinath