如何检查 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();
}

希望你明白。谢谢。

编辑：如果未附加元素，我需要 return false...

Answer 1

试试这个...

(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 2

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 3

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

function find_this(name) {

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

如果您不想使用内容文本作为比较测试，请将文本更改为某些属性..

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

How to check if an element exists in DOM

javascript

jquery

dom

jquery-plugins