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

我现在的代码是:

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

有没有更优雅的方式来处理这个问题?也许是插件或函数?


当前回答

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

// 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;
};

其他回答

检查是否存在的最快和最语义自解释的方法实际上是使用普通JavaScript:

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

它比jQuery长度替代方案要长一点,但执行速度更快,因为它是一个原生JS方法。

它比编写自己的jQuery函数要好。出于snover所说的原因,这种替代方案要慢一些。但这也会给其他程序员留下这样的印象:exists()函数是jQuery固有的东西。JavaScript会/应该被其他编辑代码的人理解,而不会增加知识债务。

注意:注意element_id前面缺少“#”(因为这是纯JS,而不是jQuery)。

试试这个。

简单、简短,可在整个项目中使用:

jQuery.fn.exists=function(){return !!this[0];}; //jQuery Plugin

用法:

console.log($("element-selector").exists());

_________________________________

或更短:(当您不想定义jQuery插件时):

if(!!$("elem-selector")[0]) ...;

甚至

if($("elem-selector")[0]) ...;

尝试测试DOM元素

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

我发现if($(selector).length){}不够。当选择器为空对象{}时,它将自动中断应用程序。

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.');
}

我仍然在寻找一个更好的解决方案,尽管这个有点重。

编辑:警告!当选择器是字符串时,这在IE中不起作用。

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

您不必检查它是否大于0,例如$(selector).length>0,$(selected).llength,这就足够了,是检查元素存在的一种优雅方式。我认为仅为此编写函数是不值得的,如果你想做更多额外的事情,那么是的。

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}