通过 jQuery 在最后一项之后插入答案

【问题标题】：Insert After Last Item by jQuery通过 jQuery 在最后一项之后插入
【发布时间】：2012-05-09 09:07:42
【问题描述】：

这是我的全部脚本，我知道这很长，但只有一行很重要，我将其全部添加为保险：

//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 div 总是相同的，也是我检查过的第一个：

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

那么问题出在哪里？为什么 jQuery 无法识别最后一个 div ？

【问题讨论】：

如果你使用 ID JQuery 只取第一个，即使你有一些具有相同 ID 的元素。
@Hadas 但是我没有其他选择，在某些时候我有 2 个不同的 Add Button 和两个不同的 divs 或更多，那么如果没有 Id 我该如何处理呢？
多个 ID 无效，因此如果您想要多个 ID，则必须使用一个类。
将类添加到'.Addable'中的所有目标

标签： javascript jquery insertafter

【解决方案1】：

问题出在 jQuery 选择器中：$('.Addable#' + TargetId + ':last')

当您有多个具有相同 id (#TargetId) 的元素时，它不是有效的 HTML。 ID 是唯一的，您不应拥有超过 1 个具有相同 ID 的元素。

jQuery 选择器假定您使用有效且正确的 HTML 标记，因此它不会费心收集具有该 ID 的所有元素。一旦 jQuery 在 DOM 中找到具有该 ID 的第一个元素，它就会停止并在此之后立即附加您的新元素。

尝试将您的 jQuery 选择器更新为简单的：$('.Addable:first') 和 $('.Addable:last')，看看它是否有效。

【讨论】：