jQuery 是否有 “存在” 功能?

如何检查 jQuery 中元素的存在?

我当前的代码是这样的:

if ($(selector).length > 0) {
    // Do something
}

有没有更优雅的方式来解决这个问题?也许是插件还是功能?

答案

在 JavaScript 中,一切都是 “真实的” 或 “虚假的”,对于数字0 (和 NaN)表示false ,其他则为true 。所以你可以这样写:

if ($(selector).length)

您不需要>0部分。

是!

jQuery.fn.exists = function(){ return this.length > 0; }

if ($(selector).exists()) {
    // Do something
}

这是为了响应: 与 Jeff Atwood 一起进行的 “ 牧群代码” 播客

如果你用过

jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }

您可能会暗示,如果没有,链接是可能的。

这样会更好:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

或者, 从 FAQ 中

if ( $('#myDiv').length ) { /* Do something */ }

您也可以使用以下内容。如果 jQuery 对象数组中没有值,则获取数组中的第一项将返回未定义。

if ( $('#myDiv')[0] ) { /* Do something */ }

您可以使用此:

// if element exists
if($('selector').length){ /* do something */ }

// if element does not exist
if(!$('selector').length){ /* do something */ }

检查存在性的最快,最语义上的自我解释方法实际上是使用简单的JavaScript

if (document.getElementById('element_id')) {
    // Do something
}

它比 jQuery 长度替代方法更长一些,但是由于它是本机 JS 方法,因此执行速度更快。

它比编写您自己的jQuery函数的替代方法更好。由于 @snover 指出的原因,该替代方法较慢。但这也会给其他程序员一个印象,即exists()函数是 jQuery 固有的。其他人可以 / 应该理解JavaScript ,而不会增加您的知识负担。

注意:请注意在element_id之前没有 '#'(因为这是普通 JS,而不是jQuery )。

您可以通过写一些字节来节省:

if ($(selector)[0]) { ... }

之所以可行,是因为每个 jQuery 对象也都伪装成一个数组,因此我们可以使用数组解引用运算符从array 中获取第一项。如果指定索引处没有任何项目,则返回undefined

您可以使用:

if ($(selector).is('*')) {
  // Do something
}

也许稍微优雅一点

可以在if ($(ele).exist()) { /* DO WORK */ }类的if语句中使用此插件,也可以使用if ($(ele).exist()) { /* DO WORK */ }

插入

;;(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case 'function':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case 'object':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == 'function') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == 'string') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case 'string':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == 'function') {
                    var exist =  ele.length > 0 ? true : false;
                    if (exist) {
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == 'function') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

jsFiddle

您可以指定一个或两个回调。第一个将触发如果元素存在,如果该元素存在第二个会火。但是,如果您选择仅传递一个函数,则仅在元素存在时才会触发。因此,如果所选择的元素存在的链就会死亡。当然,如果确实存在,则将触发第一个功能,并且链将继续。

请记住,使用回调变体有助于保持可链接性 –返回该元素,您可以像其他任何 jQuery 方法一样继续链接命令!

示例用途

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRING
if ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECT
if ($('#eleID').exist()) {  /*    DO WORK    */ }        //    enduced on jQuery OBJECT

$.exist('#eleID', function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
}, function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element DOES NOT EXIST    */
})

$('#eleID').exist(function() {            //    enduced on jQuery OBJECT with CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
})

$.exist({                        //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
    element: '#eleID',
    callback: function() {
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }
})

我看到大部分的答案在这里是不准确的 ,因为他们应该是,他们检查元素长度,它可以在许多情况下还行 ,但不是 100%,想象一下,如果数量传球而不是函数,所以我原型机检查所有功能条件并返回答案应为:

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

这将同时检查长度和类型,现在您可以通过以下方式进行检查:

$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
$([{nodeName: 'foo'}]).exists() // returns false
$('div').exists(); //return true
$('.header').exists(); //return true
$(document).exists(); //return true
$('body').exists(); //return true

确实不需要 jQuery。使用普通 JavaScript,检查以下内容会更容易且语义正确:

if(document.getElementById("myElement")) {
    //Do something...
}

如果出于某种原因您不想在该元素上添加 id,则仍然可以使用旨在访问 DOM 的任何其他 JavaScript 方法。

jQuery 确实很酷,但是不要让纯 JavaScript 被遗忘...