javascript - jQuery 将 id 添加到要附加到正文的元素

Question

我有以下功能:

simpleModal: function (data, id) {

        var responseHtml = data;

        // Append the modal HTML to the DOM
        var modalInstance = $('body').append(modalHtml);

        $(modalInstance).attr('id', id);

        $(id).find('.uiModalContent').width(480);
        $(id).find('.uiModalContent').height(320);

        // Hide the modal straight away, center it, and then fade it in
        $(id).find('.uiModal').hide().center().fadeIn();

        // Dynamically load in the passed data from the call
        $(id).find('.uiModalContent').html($(responseHtml));
        $(id).find('.uiModalContent').removeClass('loading');

        $(id).find('.ModalClose').live('click', function (e) {
            e.preventDefault();
            $(this).parents('.uiModal').fadeOut(function () { $(this).parents('.uiModalWrapper').remove() });
        });
    },

当像这样调用时:

uiModal.simpleModal('<p>An error has occured</p>','TestError');

它应该使用传递的内容将模态附加到正文，并为 modalHtml 提供一个也传递的 id。然而，将 id 附加到正文而不是 html 会让人感到困惑。我该如何解决这个问题？谢谢

Answer 1

这是因为 append 方法返回您要附加到的元素，而不是您要附加的元素。

相反，您可以使用 appendTo方法，使用方法如下；

var modalInstance = $(modalHtml).appendTo('body');

您还需要使用 $('#' + id) 作为 ID selector相对于 $(id);否则你会得到 looking for all elements with the tag name of TestError.

此外，您应该认真地考虑缓存 $('#' + id) 的结果；您正在执行相同的 DOM 查找操作 6 次；这是完全没有必要的，因为您在 var modalInstance 中缓存了完全相同的 jQuery 对象；将 $('#' + id) 的所有实例替换为 modalInstance

这一点也适用于 $(id).find('.uiModalContent')；缓存它!

var uiModelContent = modelInstance.find('.uiModalContent');
uiModelContent.height(320);
uiModelContent.width(480);
uiModelContent.html($(responseHtml));
uiModelContent.removeClass('loading');

虽然您也可以链接您的方法以获得相同的结果；

 modelInstance.find('.uiModalContent').height(320).width(480).html($(responseHtml)).removeClass('loading');