Вставить после последнего элемента с помощью JQuery

Question

Это мой весь сценарий, я знаю, что это долго, но только одна линия имеет важное значение и добавить все это страхование:

//Add new Addable div 
$('.AddNewE').click(function() { 

    var RemoveAddableButton = $('<input type="button" class="RemoveE button red" value="remove" />'); 

    $(RemoveAddableButton).click(function() { 
     $(this).closest('.Addable').remove(); 
    }); 


    var TargetId = $(this).attr('id'); 
    TargetId = TargetId.substring(3); 
    var Target = $('.Addable#' + TargetId + ':first'); 
    var Count = $('.Addable#' + TargetId).size(); 
    var CloneTarget = $(Target).clone(); 
    CloneTarget.find('input').val(''); 
    CloneTarget.insertAfter('.Addable#' + TargetId + ':last'); // ***importantOne 
    var TargetName = $(Target).find('input').attr('name'); 


    if (Count == 1) { 

     var CloneName = TargetName + '[1]'; 
     TargetName = TargetName + '[0]'; 

     $(Target).find('input').attr('name', TargetName); 
     $(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName); 
     $(CloneTarget).find('input').attr('name', CloneName); 
     $(CloneTarget).append($(RemoveAddableButton)); 

     if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) { 
      $(CloneTarget).find('span[class*="field-validation"]').remove(); 
      $(CloneTarget).append(
         $('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneName + '"></span>') 
      ); 
     } 


    } else { 

     var indx = TargetName.length - 3; 
     var CloneTargetName = TargetName.substring(0, indx); 
     CloneTargetName = CloneTargetName + '[' + Count + ']'; 
     $(CloneTarget).find('input').attr('name', CloneTargetName); 
     $(CloneTarget).append($(RemoveAddableButton)); 

     if ($(CloneTarget).find('span[class*="field-validation"]').size() > 0) { 

      $(CloneTarget).find('span[class*="field-validation"]').remove(); 
      $(CloneTarget).append(
         $('<span class="field-validation-valid invalid-side-note" data-valmsg-replace="true" data-valmsg-for="' + CloneTargetName + '"></span>') 
      ); 

     } 

    } 



    (function ($) { 
     $.fn.updateValidation = function() { 
      var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation"); 
      $.validator.unobtrusive.parse(form); 
      return this; 
     }; 
    })(jQuery); 

    $(Target).updateValidation(); 
    $(CloneTarget).updateValidation(); 



}); 

Если я нажимаю кнопку .AddNewE затем новый div добавил, но, как мой сценарий, я хочу, чтобы добавить новый div к концу divs поэтому я использую

CloneTarget.insertAfter('.Addable#' + TargetId + ':last'); 

но всегда новый div добавил в качестве второго div это означает, что всегда т он :first и :last ДИВ это же и является первым одна и я проверил по:

$('.Addable#' + TargetId).css('border', ''); 
    $('.Addable#' + TargetId + ':last').css('border', '3px dotted green'); 
    $('.Addable#' + TargetId + ':first').css('border', '3px dotted red'); 

Итак, где проблема? почему jQuery не может узнать последние div?

Answer 1

Проблема заключается в селекторе JQuery: $ ('Addable #' + TargetId + ': последний')

Это не действует HTML, когда у вас есть несколько элементов с одинаковыми идентификаторами (#TargetId). ID уникален, и вы не должны иметь более одного элемента с тем же идентификатором.

Селектор jQuery предполагает, что вы используете правильные правильные HTML-разметки, поэтому не нужно собирать все свои элементы с этим идентификатором. Как только jQuery обнаружит первый элемент в DOM с этим идентификатором, он прекратит и добавит ваш новый элемент сразу после этого.

Попробуйте обновить селектор jQuery до простого: $ ('. Addable: first') и $ ('. Addable: last') и посмотреть, работает ли он.