使用jquery動態地添加div後的img標籤

我想在div欄內的圖片標籤之後動態地添加一個classname爲「new-fish」的div，當我點擊發布按鈕時。包括新的div應該有新的id。根據點擊的數量，應該添加很多div。當我用下面的代碼嘗試它沒有得到追加。使用jquery動態地添加div後的img標籤

<section class="main-content" id="container"> 
    <div class="oyster"> </div> 
    <div class="small-fish" id="fish1"> </div> 
    <div class="medium-fish" id="fish2"> </div> 
    <div class="large-fish" id="fish3"> </div> 

    <img src="Assets/Arrow.png" class="right-arrow" alt="arrow" id="rightarrow" /> 

    </section> 

<footer> <input type="button" value="Post" class="post-button" /></footer> 

/*Jquery */ 
$('.post-button').on('click',function(e){ 

    //$('#container img:last-child').append('<div class="small-fish"> </div>'); 
    $('#rightarrow').append('<div class="new-fish"> </div>'); 



});

來源

2014-05-09 user3218194

您不能追加元素的圖像，你可能會尋找是插入new-fish作爲圖像的下一個兄弟然後使用.after()

$('#rightarrow').after('<div class="new-fish"> </div>');

演示：Fiddle，Demo2

來源

2014-05-09 06:49:57

如何確保每個div有一個新的ID？ – user3218194

@ user3218194查看第二個演示 –

你應該把你的代碼放在裏面

$(document).ready(function() { ... })

，以便在加載dom之後調用它，並且確實存在類post-button的按鈕。

的ID rightarrow引用的圖片，你不能把一個div的圖像內：你想要做什麼是div追加到部分與ID main-content，它會被添加到右後段的結束圖片。當然，當你添加另一個div時，它會在前一個div添加之後被放置。

至於id，你可以保留一個變量來計算點擊次數。

$(document).ready(function() { 

    var numberOfClicks = 0; 

    $('.post-button').on('click',function(e){ 
     numberOfClicks++; 
     $('#container').append('<div id="appendedDiv'+numberOfClicks+'" class="new-fish"> </div>'); 

    }); 

});

來源

2014-05-09 06:58:24 user1498339

看起來很好，+1。 –

使用這樣的...

$(document).ready(function(){ 
var i=0; 
$('.post-button').on('click',function(e){ 
$('#container').append("<div class='new-fish' id='new-fish"+i+"'>coming </div>"); 
i++; 
}); 

});

來源

2014-05-09 07:00:43

使用jquery動態地添加div後的img標籤

回答

相關問題