如何增加數量並顯示動態添加的div jquery？

我有一個靜態div上的鏈接，默認情況下已經加載（Div number 1）。如何增加數量並顯示動態添加的div jquery？

如圖所示，每當我點擊超級鏈接時，div都會添加到每一個我最擅長的div的下面。我想要做的是，正如你在圖片中看到的那樣，我必須在動態添加的div上增加div數字（如2,3,4）以及稱爲'Div number ...'的文本。

enter image description here

我如何通過使用jQuery實現這一目標？

來源

2014-10-07 Vasethvan

顯示你的努力呢？ – Amit 2014-10-07 12:40:11

到目前爲止，你有嘗試過什麼嗎？ – 2014-10-07 12:40:28

您可以發佈您迄今爲止寫的代碼來實現屏幕截圖中的內容嗎？ – 2014-10-07 12:40:45

這是非常簡單的。只需追加新的div。

(function(){ 
    var div = 0; 
    $(".create").click(function(){ 
    div++; 
    $(".block").append('<div class="new_div">Div number '+div+'</div>'); 
    }); 
})();

作爲演示：Click here

來源

2014-10-07 12:59:46

@Vasethvan有什麼區別？這個方法和我的完全一樣，你接受後仍然不接受我的回答。理由？ – 2015-07-01 07:12:22

假設您將div放入容器ID「容器」中。

添加遞增div的代碼是。

var no = $('div','#contianer').length; // will give you total no of div in that container. 
var incno = parseInt(no,10)+1;

來源

2014-10-07 12:41:41 developerCK

嗨，夥計，我試過你的代碼，但我沒有得到任何正確的結果。也許我錯過了一些東西... var noofDivs = $（'。assignContName'）。length; alert（noofDivs）; var incno = parseInt（noofDivs，10）+ 1; 我收到預期的增量訂單警報。我如何插入特定的div內的值？爲了您的實物信息，我已在'.assignContName'中插入值的範圍內的標記。 – Vasethvan 2014-10-07 12:58:06

我嘗試了一些基於你的邏輯的方法，工作正常。但爲了簡單起見，我跟着其他東西。我會複製你的代碼，當我需要時會使用它。謝謝你的解決方案。 – Vasethvan 2014-10-07 13:13:07

也許我的僞代碼給你一個想法

$('#linktoadd').click(function(){ 
    $('#divholder').append('<div class="foo">Div Number'+($('#divholder div').length +1) +'</div>'); 
}

來源

2014-10-07 12:41:56

其僞代碼，OP沒有給出任何代碼示例，所以 – 2014-10-07 15:57:01

是啊謝謝你指出，更新 – 2014-10-07 16:51:09

嘗試DEMO

HTML

<div> 
    <a id="lnk" href="#">Link to add more divs</a> 
</div>

SCRIPT

var count = 1; 
$("#lnk").click(function() { 
    $(this).parent().append('<div class="divStyle">Div number ' + count + ' </div>'); 
    count++; 
});

CSS

.divStyle { 
    background-color:gray; 
    margin-bottom:2px; 
    }

來源

2014-10-07 13:01:52

謝謝老兄。它工作非常完美。我只關注你的代碼... – Vasethvan 2014-10-07 13:13:40

Pleasure @ user3667940 :) – 2014-10-07 13:14:14

如何增加數量並顯示動態添加的div jquery？

回答

相關問題