使用JavaScript嵌套DIV

我想加載按鈕上的DIV點擊另一個DIV內，另一個點擊它應該在新創建的DIV內創建一個新的DIV。這裏是我的小提琴：http://jsfiddle.net/LzCW5/4/和我的代碼：使用JavaScript嵌套DIV

HTML：

<a href="#" onclick="nestDiv()">Generate</a> 
<div id='x0'> 
    0 
</div>

的JavaScript：

int level=1; 
function nestDiv() 
{ 
    document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>"; 
    level++; 
    if(level==5) 
     //do somthing 
}

我也需要執行一些特殊的操作時，嵌套級別達到5.我不是那麼贊成在JavaScript。所以請告訴我，我該如何實現這一目標？

來源

2014-05-17 Aishwarya Shiva

http://jsfiddle.net/adeneo/LzCW5/7/ – adeneo

awesome @adeneo。請添加代碼作爲您的答案。 –

不然，有人會在任何時刻偷取它併發布它，或發佈更好的內容。如果沒有，您可以發佈並自己接受答案。 – adeneo

在你的代碼只需要改變int to var並調用該函數的變量：

var level=1; 
nestDiv = function() 
{ 
    document.getElementById('x'+(level-1)).innerHTML="<div id='x"+level+"'>"+level+"</div>"; 
    level++; 
}

You can see this working here

來源

2014-05-17 16:51:50 NEOLPAR

感謝您的純JS解決方案。但是，你能告訴我如何使用'var'而不是'int'來影響輸出嗎？ –

當然，你可以在這裏看到parseInt函數。 http://www.w3schools.com/jsref/jsref_parseint.asp – NEOLPAR

下面是如何追加div在jQuery：

var newDiv = $("<div id='x"+level+"'>"+level+"</div>"); 
$('#x'+(level-1)).append(newDiv);

這應該更換你的document.getElementById...線

來源

2014-05-17 16:41:08 Nicolas78

謝謝@ Nicolas78。 +1給你，但我標記NEOLPAR的答案，因爲adeneo和NEOLPAR給出的解決方案是純JS。 :) –

我的理解按你的問題：

當你點擊一個按鈕，添加一個div到另一個div。

現在，當用戶單擊另一個按鈕時，必須在先前創建的新div中添加新的div。

enter image description here

讓我們把它分解：

$("button").click(function() { 
    if($("#referenceDivId").children().length == 0) { 
     // if there are no children initially 
     $("#referenceDivId").append("<div>New div</div>"); 
    } else if($("#referenceDivId").children().length == 5) { 
     // do your magic when children divs are 5 
    } 
    else { 
     // if it already had children 
     $("#referenceDivId").find("div:last").append("<div>New div</div>"); 
    } 
});

DEMO

來源

2014-05-17 16:48:10 mohamedrias

謝謝@mohamedrias。 +1給你，但我標記了NEOLPAR的答案，因爲adeneo和NEOLPAR給出的解決方案都是純JS。 :) –

很高興幫助:) – mohamedrias

使用JavaScript嵌套DIV

回答

相關問題