CODEWITHSUNDEEP
jqueryhtml
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

How can I append element after last child?

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);
    });    
});

I expect the following output after one click.

   <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>

But it does not work. What am i doing wrong?

Upvotes: 0

Views: 75

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : you can use :last to get last uploader and use .after to put your new uploader

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

Note - You are putting same id for every cloned uploader which is not good practice. Instead, you can change id with some counter or variable as shown below.

$(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);
       });
});

Upvotes: 3

Related Questions