如何使用Javascript for loop創建重複的HTML？

我想用JS動態創建下面的html，但不能完成循環工作。如何使用Javascript for loop創建重複的HTML？

我會從用戶輸入中收到計數值（即：1,2,3等）。

<div class='outer-1'> 
    <div class='inner-1'></div> 
</div> 
<div class='outer-2'> 
    <div class='inner-1'></div> 
    <div class='inner-2'></div> 
</div> 
<div class='outer-3'> 
    <div class='inner-1'></div> 
    <div class='inner-2'></div> 
    <div class='inner-3'></div> 
</div> 
........

這是我到目前爲止：像下面只

var html = ''; 
for (var i = 1; i <= count; i++) { 
    html += "<div class='outer-"+ i +"'>"; 
    html += "<div class='inner"-"+ i +"'></div>"; 
    html += "</div>"; 
}

該代碼打印。

<div class='outer-1'> 
    <div class='inner-1'></div> 
</div> 
<div class='outer-2'> 
    <div class='inner-2'></div> 
</div>

來源

2011-07-31 user871993

您需要一個內部循環來生成每個外部<div>的內容。

var html = ''; 
for (var i = 1; i <= count; i++) { 
    html += "<div class='outer-"+ i + "'>"; 
    for (var j = 1; j <= i; j++) { 
     html += "<div class='inner-" + j + "'></div>"; 
    } 
    html += "</div>"; 
}

來源

2011-07-31 22:53:36

謝謝！很棒。 – user871993

不客氣，很高興能成爲服務對象。看起來你是Stack Overflow的新手。首先，歡迎，其次，如果答案能解決您的問題，那麼習慣性地*接受*它。這兩方面都表明它是正確的，並且也爲發佈它的用戶提供了一些聲譽。許多用戶更願意回答那些花時間接受答案的人的問題，所以這也對你有所幫助。乾杯! –

你需要一個for環內的for循環：

var html = ''; 
for (var i = 1; i <= count; i++) { 
    html += "<div class='outer-"+ i +"'>"; 
    for (var j = 1; j <= i; j++) 
     html += "<div class='inner-"+ j +"'></div>"; 
    html += "</div>"; 
}

來源

2011-07-31 22:54:01 Paulpro

您需要使用外部和內部循環：

var html = ''; 
for (var i = 1; i <= count; i++) { 
    html += "<div class='outer-"+ i +"'>"; 

    for (var j = 1; j <= i; j++) { 
     html += "<div class='inner"-"+ j +"'></div>"; 
    } 

    html += "</div>"; 
}

來源

2011-07-31 22:55:16

你需要一個新的循環的內divs like this：

var count=3; 
var html = ''; 

for (var i = 1; i <= count; i++) 
{ 
    html += "<div class='outer-"+ i +"'>" + "\n"; 

var inHtml = ''; 
for (var j = 1; j <= i; j++) 
    { 
    inHtml += "<div class='inner-"+ j +"'></div>" + "\n"; 
    } 

html += inHtml; 
html += "</div>" + "\n"; 
}

來源

2011-07-31 23:03:48 pit

如何使用Javascript for loop創建重複的HTML？

回答

相關問題