Question

我正在创建一个jQuery插件，它会根据实例的数量在DOM中创建很多元素......它的工作方式如下：

$(document).ready(function(){
    $("#register-trigger").modal();
});
(function($){
    $.fn.modal = function(a){
        return this.each(function(){
            var el = $(this),
                element = $('<div class="modal close"></div>');
            $("body").prepend(element);
        });
    };
}(jQuery));

但我需要知道元素是否已插入页面。如果没有插入，我将使用变量中的元素，否则我将使用页面上已插入的元素...但是如何检查？

如果我使用以下代码，则会说元素已经存在......

(function($){
    $.fn.modal = function(a){
        return this.each(function(){
            var el = $(this),
                element = $('<div class="modal close"></div>');
            //This will return 1, same as true
            console.log(element.length);
        });
    };
}(jQuery));

我需要什么？

if( already inerted into the page ){
    modalOpen();
} else{
    modalCreate();
}

我希望你理解。谢谢。

编辑：如果没有附加元素，我需要返回false ...

Answer 1

element = $('<div class="modal close"></div>');
console.log(element.length);

这将始终为1，因为您只是将某些内容放入element。它没有告诉你关于元素是否在DOM中的任何信息。

相反，您可以使用$.contains：

之类的内容

if ( $.contains( $( 'body' )[0], element ) {
    // the element has been added
} else {
    // the element has not been added
}

更正：我的第一个版本有一个错误，$.contains需要一个DOM元素作为第一个参数，而不是jQuery对象。

文档：http://api.jquery.com/jQuery.contains/

Answer 2

试试这个......

(function($){
    $.fn.modal = function(a){
        return this.each(function(){
            var el = $(this);
            var element = $("div.modal.close");
            if (element.length) {
                // it already exists in the page
            }
            else {
                // it doesn exist.  Create it here
            }
        });
    };
}(jQuery));

它只是检查了DOM以查看匹配的元素是否已经存在。

Answer 3

为什么不使用过滤器函数来查看元素是否存在，如

function find_this(name) {

                return $('div').filter(function() {
                    return $.trim($(this).text().toLowerCase()) === name;
                })

如果您不希望将内容文本用作比较测试，则将文本更改为某个属性。

如何检查DOM

3 个答案: