jQuery是否有“存在”功能?

JavaScript

2020-03-09

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

我当前的代码是这样的:

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

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

第172篇《jQuery是否有“存在”功能?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
老丝村村Stafan 2020.03.09

I had a case where I wanted to see if an object exists inside of another so I added something to the first answer to check for a selector inside the selector..

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

I just like to use plain vanilla javascript to do this.

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
Near路易小胖 2020.03.09

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

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
米亚JinJin樱 2020.03.09

尝试测试DOM元素

if (!!$(selector)[0]) // do stuff
Tony阳光 2020.03.09
$(selector).length && //Do something
SamEva 2020.03.09

在jQuery官方网站本身中整齐地记录了检查元素是否存在的信息!

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

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

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

$("#myDiv").show();
十三SamJim 2020.03.09

您可以使用Java脚本中的长度来检查元素是否存在。如果长度大于零,则元素存在;如果长度为零,则元素不存在

// 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
}
村村JinJin 2020.03.09

$.contains()你想要的吗?

jQuery.contains( container, contained )

$.contains()如果第二个参数提供的DOM元素是第一个参数提供的DOM元素的后代(无论是直接子元素还是嵌套得更深),则方法返回true。否则,它返回false。仅支持元素节点。如果第二个参数是文本或注释节点,$.contains()则将返回false。

注意:第一个参数必须是DOM元素,而不是jQuery对象或普通JavaScript对象。

伽罗乐 2020.03.09

您可以使用此:

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

if($(selector).exists()){/*do something*/}
老丝乐 2020.03.09

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

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

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

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

布雷西 2020.03.09

您可以通过写入以下内容来保存一些字节:

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

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

null 2020.03.09

是!

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

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

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

梅古一 2020.03.09

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

if ($(selector).length)

您不需要那>0部分。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android