如何在最後一個孩子後添加元素？

Question

HTML：

<div class="uploader" id="uniform-file"> 
    <input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width: 100%; opacity: 0;" size="20"><span class="filename">No file selected</span><span class="action">Choose File</span> 
</div> 

<div class="uploader" id="uniform-file"> 
    <input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width: 100%; opacity: 0;" size="20"><span class="filename">No file selected</span><span class="action">Choose File</span> 
</div> 

JQuery的：

$(document).ready(function(){ 
    $('.tolet_img').click(function(){  
     var htmlString = $('.uploader').clone(true); 
     $('.uploader').children().last().after(htmlString); 
    });  
}); 

我預計會在點擊下面的輸出。

<div class="uploader" id="uniform-file"> 
    <input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width: 100%; opacity: 0;" size="20"><span class="filename">No file selected</span><span class="action">Choose File</span> 
</div> 

<div class="uploader" id="uniform-file"> 
    <input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width: 100%; opacity: 0;" size="20"><span class="filename">No file selected</span><span class="action">Choose File</span> 
</div> 

    <div class="uploader" id="uniform-file"> 
     <input type="file" name="data[Tolet][images][]" class="span12 tolet_img" id="file" style="width: 100%; opacity: 0;" size="20"><span class="filename">No file selected</span><span class="action">Choose File</span> 
    </div> 

但它不起作用。我究竟做錯了什麼？

Answer 1

試試這個：你可以用:last獲得最後的上傳和使用.after把你的新上傳

$(document).ready(function(){ 
    $('.tolet_img').click(function(){ 
    var htmlString = $('.uploader:last').clone(true); 
    $('.uploader:last').after(htmlString); 
    }); 
}); 

注意 - 你把相同的ID爲每個克隆上傳這是不好的做法。相反，你可以用一些計數器或變量來改變id，如下所示。

$(document).ready(function(){ 
     var uploaderCount = 0; 
     $('.tolet_img').click(function(){ 
     var $htmlString = $('.uploader:last').clone(true); 
     $htmlString.attr('id', 'uniform-file-'+uploaderCount); 
     uploaderCount++; 
     $('.uploader:last').after($htmlString); 
     }); 
});