javascript - null判定 - jQuery是否存在“存在”功能?

不需要jQuery

if(document.querySelector('.a-class')) {
  // do something
}

你可以用這個：

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

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

你可以用這個：

jQuery.fn.extend({
    exists: function() { return this.length }
});

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

嘗試測試DOM元素

if (!!$(selector)[0]) // do stuff

在JavaScript中，一切都是“真實的”或“虛假的”，而數字0 （和NaN）意味著false ，其他一切都是true 。 所以你可以寫：

if ($(selector).length)

你不需要>0部分。

如果你用過

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對像數組中沒有值，那麼獲取數組中的第一個項將返回undefined。

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

怎麼樣：

function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}

這是非常小的，並且每次都需要用$()封裝選擇器。

您可以使用java腳本中的長度來檢查元素是否存在。 如果length大於零，則如果length為零則存在元素，則元素不存在

// These by Id
if( $('#elementid').length > 0){
  // Element is Present
}else{
  // Element is not Present
}

// These by Class
if( $('.elementClass').length > 0){
  // Element is Present
}else{
  // Element is not Present
}

您可以使用：

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

或許更優雅一點 。

我偶然發現了這個問題，我想分享一下我目前使用的代碼片段：

$.fn.exists = function(callback) {
    var self = this;
    var wrapper = (function(){
            function notExists () {}

            notExists.prototype.otherwise = function(fallback){
                if (!self.length) {                    
                    fallback.call();
                }
            };

            return new notExists;
        })();

    if(self.length) {
        callback.call();    
    }

    return wrapper;
}

現在我可以寫這樣的代碼 -

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

它可能看起來很多代碼，但是當用CoffeeScript編寫它時它很小：

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists

我只想使用普通的香草javascript來做到這一點。

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}

我正在使用這個：

    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    ); 

僅當存在jQuery元素時才執行鏈 - http://jsfiddle.net/andres_314/vbNM3/2/

我發現if ($(selector).length) {}是不夠的。 當selector是一個空對象{}時，它會默默地破壞你的應用程序。

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

我唯一的建議是對{}執行額外的檢查。

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

我仍在尋找更好的解決方案，因為這個有點重。

編輯： 警告！ 當selector是一個字符串時，這在IE中不起作用。

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

是!

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

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

這是對Jeff Atwood的Herding Code播客的回應

是$.contains()你想要什麼？

jQuery.contains( container, contained )

如果第二個參數提供的DOM元素是第一個參數提供的DOM元素的後代，無論是直接子$.contains() ， $.contains()方法都返回true。 否則，它返回false。 僅支持元素節點; 如果第二個參數是文本或註釋節點， $.contains()將返回false。

注意 ：第一個參數必須是DOM元素，而不是jQuery對像或純JavaScript對象。

真的不需要jQuery。 使用純JavaScript，檢查以下內容更容易，語義更正確：

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

如果由於任何原因您不想將id放入元素，您仍然可以使用任何其他用於訪問DOM的JavaScript方法。

jQuery真的很酷，但不要讓純粹的JavaScript被遺忘......

這個插件可以在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    */
    }
})

這與所有答案非常相似，但為什麼不使用! 運算符兩次，這樣你就可以得到一個布爾值：

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

if ($(selector).exists()) {
    // the element exists, now what?...
}

$(selector).length && //Do something