1

これが私のすべてのスクリプトです。これが長いことはわかっていますが、重要なのは 1 行だけです。保険のためにすべてを追加します。

//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追加したいので、使用しますdivdivs

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

divしかし、常に2 番目に追加された新しいdivものは、常に:firstと:lastdiv が同じであり、私がチェックした最初のものでもあることを意味します。

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

では、どこに問題があるのでしょうか。jQuery が last を認識できないのはなぜdivですか?

4

1 に答える 1

4

問題は jQuery セレクタにあります: $('.Addable#' + TargetId + ':last')

同じ ID (#TargetId) を持つ要素が複数ある場合、有効な HTML ではありません。ID は一意であり、同じ ID を持つ複数の要素を持つことは想定されていません。

jQuery セレクターは、ユーザーが有効で正しい HTML マークアップを使用していることを前提としているため、その ID を持つすべての要素をわざわざ収集する必要はありません。jQuery は、その ID を持つ DOM 内の最初の要素を見つけるとすぐに停止し、その直後に新しい要素を追加します。

jQuery セレクターを単に $('.Addable:first') および $('.Addable:last') に更新してみて、それが機能するかどうかを確認してください。

于 2012-05-10T22:20:13.483 に答える