javascript - jquery菜鸟 - jQuery是否存在“存在”功能?




jquery是什么 (20)

$("selector" )给出一个具有length数据的对象。 如果在选择器中定义了元素,则可以从对象中获取它们。 所以,如果你检查它的长度,你已经可以找到,是否存在任何元素。 在javascript 0 == falsenull == false 。 如果你没有得到0你的代码就会运行。

if($("selector").length){
   //code in the case
} 

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

我当前的代码是这样的:

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

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


不需要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*/}

在JavaScript中,一切都是“真实的”或“虚假的”,而数字0 (和NaN)意味着false ,其他一切都是true 。 所以你可以写:

if ($(selector).length)

你不需要>0部分。


在官方jQuery网站上整齐地记录检查元素是否存在

使用选择器返回的jQuery集合的.length属性:

if ($("#myDiv").length) {
    $("#myDiv").show();
}

请注意,并不总是需要测试元素是否存在。 以下代码将显示该元素是否存在,如果不存在则不执行任何操作(没有错误):

$("#myDiv").show();

尝试测试DOM元素

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

怎么样:

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

我发现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

我有一个案例,我想看看一个对象是否存在于另一个内部,所以我在第一个答案中添加了一些内容来检查选择器内的选择器。

// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

我正在使用这个:

    $.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/



$.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被遗忘......


这与所有答案非常相似,但为什么不使用! 运算符两次,这样你就可以得到一个布尔值:

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

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

这是我在jQuery中最喜欢的exist方法

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

和其他版本,当选择器不存在时支持回调

$.fn.exist = function(onExist, onNotExist) {
    return $(this).each(function() {
        var target = $(this);

        if (this.length > 0) {
            if (typeof onExist === 'function') {
                onExist.call(target);
            }
        } else {
            if (typeof onNotExist === 'function') {
                onNotExist.call(target);
            }
        }
    });
};

例:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

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




jquery