javascript - 如何检查元素是否存在于 DOM 中

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/