检查jQuery中是否存在元素[重复]答案

【问题标题】：Check if element exists in jQuery [duplicate]检查jQuery中是否存在元素[重复]
【发布时间】：2011-06-03 07:28:42
【问题描述】：

如果元素是由.append() 方法创建的，如何检查元素是否存在？ $('elemId').length 不适合我。

【问题讨论】：

.length 工作正常，请参阅此处：jsfiddle.net/yahavbr/A9zW2 如果您确实使用了#，请发布您的代码，我们会看看您做错了什么。
使用 $('#selector').length 和 $('.selector').length 作为 id 和 class 选择器。 $('#selector option').size() 检查下拉菜单的大小。

【解决方案1】：

$('elemId').length 不适用于我。

你需要把#放在元素id之前：

$('#elemId').length
---^

使用原生 JavaScript，您不需要哈希 (#)，例如document.getElementById('id_here') ，但是在使用 jQuery 时，您确实需要像 CSS 一样基于 id 将哈希值放入目标元素。

【讨论】：

使用 CSS 选择器，因此“#elementId”按元素选择。 "elementId" 实际上会选择所有 tags 被命名为 "elementId" 的 emenets
@trejder 发帖人很可能不知道 Vanilla JS，当他们说“vanilla JavaScript”时，他们实际上意味着 基础 JavaScript（“vanilla”就像“plain”，“朴素）。
@trejder 看起来“Vanilla JS”与基本 Javascript 完全一样（下载的文件总是空的）——有人刚刚决定为基本 Javascript 做一个推销。
是的，该网站正在嘲笑对名为“Vanilla JS”的框架的需求，它只是 JavaScript 本身。 @trejder 应该仔细阅读。
只有当你使用了错误的函数时，你才“不需要哈希”。 document.querySelector('#id_here') 与 jQuery 等效的 $('#id_here') 一样需要井号。

【解决方案2】：

尝试检查选择器的长度，如果它返回了某些内容，则该元素必须存在，否则不存在。

 if( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}


 if( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}

【讨论】：

我发现这种方法非常不直观。这几乎就像询问如何确定一个数字是否为负数，然后有人告诉您您需要在汇编中编写代码，然后手动旋转 CPU 寄存器中的一些位，而不是简单地调用像 .isNegative() 这样的方法。检查“长度”属性的值会使事情变得混乱。我宁愿看到类似 .exists() 方法的东西，它可以在扫描代码时立即识别。
在某些方面，jquery 在使 javascript 更易于访问方面取得了长足的进步，但距离习惯用法还很远
这个解决方案非常直观。 length 属性告诉您有多少元素与查询匹配。这有什么不直观或不直接的？
你可以写一个更直观的函数：function exists(elementName) { return $(elementName).length; }
这会在控制台中引发异常。 jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined

【解决方案3】：

试试这个：

if ($("#mydiv").length > 0){
  // do something here
}

如果元素不存在，长度属性将返回零。

【讨论】：

不需要 > 0，如果为 0 则计算结果为 false。
如果不包含> 0，我无法让它工作。任何想法为什么会发生这种情况？
很抱歉误投反对票，稍后会修复它
@wessamelmahdy 冗长可以提高清晰度，从而可以降低维护的认知成本
if ($("#mydiv").length === 0){ 因为类型

【解决方案4】：

如何检查元素是否存在

if ($("#mydiv").length){  }

如果是0，它将评估为false，而不是true。

没有必要进行大于、小于比较。

【讨论】：

这对我不起作用。我使用的浏览器是firefox 32.02。
随意粘贴你的sn-p
谢谢，没问题了。我已将其替换为 stackoverflow.com/a/21801090/2232458

【解决方案5】：

您的elemId 顾名思义，是一个Id 属性，您可以通过这些操作来检查它是否存在：

Vanilla JavaScript：如果您有更高级的选择器：

//you can use it for more advanced selectors
if(document.querySelectorAll("#elemId").length){}

if(document.querySelector("#elemId")){}

//you can use it if your selector has only an Id attribute
if(document.getElementById("elemId")){}

jQuery：

if(jQuery("#elemId").length){}

【讨论】：

您不需要!= null，因为querySelector 将始终返回null（这是错误的）或一个元素
我仍然会使用if (document.querySelector("elemId") != null ) 只是为了提高代码的可读性
@Mrinmoy 你的思维方式要么来自 Java 要么来自 C#。在 JavaScript 中，我们知道我们有七个虚假值（0、-0、null、undefined、''、NaN 和 false），考虑到这些虚假值if (document.querySelector("elemId") != null ) 对编写更具可读性的代码没有影响。在 JavaScript 世界中，不要让您的思维方式远离 Java 或 C# 等结构化编程语言，强烈建议您了解 JavaScript 社区的约定。对于这种特定情况下的 JavaScript 开发人员，!= null 完全是多余的，而且可读性也差很多。
@MehranHatami ，因此您同意代码只能由 javaScripter 读取，如果 querySelector() 返回 null or 0 或其他 5 个值中的任何一个，他仍然会感到困惑。 querySelectorAll() 和 jQuery 在找不到元素时有不同的返回值。请考虑现在人们在使用多种技术和框架，因此使事情更具可读性肯定会受益。顺便说一句，我更像是一个 javascripter 而不是 java/golang 程序员
@Mrinmoy 我同意这是一个有争议的话题，但我所说的并不是我的观点，而是事实。在我的团队中，如果我看到一个具有 ` != null ` 的拉取请求，我不会批准它。虽然这是一个惯例，但它已经成为一种规则。对我来说最重要的是确保我团队中的开发人员了解基础知识并且他们的代码是一致的，没有冗余。 ` != null` 对我来说就像 ` != false` 是 if 语句的有效条件，但它本身是多余的。

【解决方案6】：

您还可以使用类似数组的表示法并检查第一个元素。空数组或集合的第一个元素只是 undefined，因此您会得到“正常”的 javascript 真/假行为：

var el = $('body')[0];
if (el) {
    console.log('element found', el);
}
if (!el) {
    console.log('no element found');
}

【讨论】：

【解决方案7】：

可以使用原生JS来测试对象是否存在：

if (document.getElementById('elemId') instanceof Object){
    // do something here
}

别忘了，jQuery 只不过是原生 Javascript 命令和属性的复杂（而且非常有用）的包装器

【讨论】：

你不需要instanceof Object

【解决方案8】：

如果你的元素有一个类，那么你可以尝试以下方法：

if( $('.exists_content').hasClass('exists_content') ){
 //element available
}

【讨论】：

如果元素不存在，如何检查类。
哇没有看到答案来了
这个答案应该得到一个金色徽章，因为它是最有趣的 SO 答案:))