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


这个问题在这里已有答案:

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


1016
2018-01-04 10:15


起源


.length 工作得很好,见这里: jsfiddle.net/yahavbr/A9zW2 如果你确实使用过 # 发布你的代码,我们会看到你做错了什么。 - Shadow Wizard
不知道这是如何变得如此受欢迎。它是1.一个印刷错误,2。事先差不多3年问一个问题的副本。 - James Donnelly
@JamesDonnelly你可以添加这个问题的旧版本的链接吗?谢谢! - Matt Newelski
@JamesDonnelly人们过于迅速地判断别人的“重复”问题,这是不对的。有时你真的会尽力找到你的答案,但你却找不到它。在这种情况下,我确信他找到了另一个,但是因为他没有为他工作因为他离开了'#'而解雇了它。虽然这是他的错误,但他没有抓住它。即使情况并非如此,如果他们正在搜索,将来会更容易找到他们的答案,因为现在存在多个相同或类似问题的实例。 - Soundfx4
@ Soundfx4:+1因为 People are far too quick to judge others for "duplicate" questions..肯定是男人!有些人紧张不安...... - Magno C


答案:


$('elemId').length 不起作用   我。

你需要放 # 在元素id之前:

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

使用vanilla JavaScript,您不需要哈希(#)例如 document.getElementById('id_here') 但是,在使用jQuery时,您需要将哈希值放在目标元素的基础上 id 就像CSS一样。


1446
2018-01-04 10:17



因此使用CSS选择器“#elementId”按元素选择。 “elementId”实际上会选择所有的emenet 标签 被命名为“elementId” - Petr Gladkikh
@trejder很可能这张海报没有意识到Vanilla JS,当他们说“香草JavaScript”时,他们实际上就是这样 意味着 基础JavaScript(“普通”中的“vanilla”,“unadorned”)。 - D Coetzee
@trejder看起来“Vanilla JS”与基本Javascript完全相同(下载的文件总是空的) - 有人刚刚决定为基础Javascript做一个销售推销。 - Brilliand
是的,那个网站嘲笑需要一个名为“Vanilla JS”的框架,它只不过是JavaScript本身。 @trejder应该仔细阅读一下。 - LasagnaAndroid
只有在使用错误的函数时才“不需要哈希”。 document.querySelector('#id_here') 需要哈希符号和jQuery等价物一样多 $('#id_here')。 - AndreKR


尝试检查选择器的长度,如果它返回一些东西,那么元素必须存在,否则不存在。

 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
}

288
2017-10-07 12:54



我发现这种方法非常不直观。这几乎就像是在询问如何确定一个数字是否为负,然后有人告诉你需要在汇编中编写代码然后手动旋转CPU寄存器中的一些位,而不是简单地调用类似.isNegative()的方法。检查'length'属性的值会使事情变得混乱。我宁愿看到类似.exists()方法的东西,它在扫描代码时可以立即识别。 - Aquarelle
在某些方面,jquery实现了使javascript更容易访问的跨越式发展,但仍远未成为惯用语 - lfender6445
这个解决方案非常直观。 length属性告诉您有多少元素与查询匹配。什么不直观或直截了当? - Alice Wonder
你可以写一个更直观的功能:function exists(elementName) { return $(elementName).length; } - Sinister Beard


尝试这个:

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

如果element不存在,则length属性将返回零。


92
2018-02-13 04:38



不需要> 0,如果它为0,它将评估为false。 - Wessam El Mahdy
如果没有包括在内,我就无法工作 > 0。有什么想法可能会发生吗? - KillahB


如何检查元素是否存在

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

如果是 0,它将评估为 false,还有更多 true

不需要大于,小于比较。


51
2018-06-30 21:37



这不适合我。我使用的浏览器是firefox 32.02。 - KeepMove
随意粘贴您的代码段 - lfender6445
谢谢,没问题了。我用这个替换它 stackoverflow.com/a/21801090/2232458 - KeepMove


你的 elemId 顾名思义,是一个 Id 属性,这些是你可以做的,以检查它是否存在:

香草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){}

24
2018-02-15 17:41



你不需要 != null 如 querySelector 永远都会回来 null (这是假的)或元素 - 1j01
我还是会用的 if (document.querySelector("elemId") != null ) 只是为了提高代码的可读性 - Mrinmoy
@Mrinmoy你的思维方式要么来自Java,要么来自C#。在JavaScript中我们知道我们有七个假值(0,-0,null,undefined,'',NaN和false)并考虑那些假值 if (document.querySelector("elemId") != null ) 对编写更易读的代码没有任何影响。在JavaScript世界中,强烈建议您了解JavaScript社区的惯例,而不是像Java或C#这样的结构编程语言。对于此特定情况下的JavaScript开发人员 != null 是完全冗余的,可读性更低。 - Mehran Hatami
@MehranHatami,所以你同意代码只能由javaScripter读取,如果他仍然会感到困惑,如果 querySelector() 回报 null or 0 或任何其他5个值。 querySelectorAll()  和jQuery在找不到元素时有不同的返回值。请注意,这些天人们正在研究技术和框架的多语言,因此使事物更具可读性肯定会受益。顺便说一句,我更像是一个javascripter而不是java / golang程序员 - Mrinmoy
@Mrinmoy我同意这是一个值得商榷的话题但是我说的不是我的意见而是事实。在我的团队中,如果我看到一个具有“!= null”的拉取请求,我不赞成它。虽然它是一种惯例,但它已经成为一种规则。对我来说最重要的是确保我的团队中的开发人员知道基础知识并且他们的代码与没有冗余一致。对我来说`!= null`就像`!= false`这是if语句的有效条件,但它本身就是多余的。 - Mehran Hatami


您还可以使用类似数组的表示法并检查第一个元素。 空数组或集合的第一个元素就是 undefined,所以你得到“正常”的javascript truthy / falsy行为:

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

11
2017-09-17 21:24





您可以使用本机JS来测试对象的存在:

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

不要忘记,jQuery只不过是一个复杂的(并且非常有用)本机Javascript命令和属性的包装器


7
2018-05-12 13:12



你不需要 instanceof Object - 1j01


如果您的元素上有一个类,那么您可以尝试以下方法:

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

-12
2018-01-29 10:09



如果元素不存在,您如何检查该类。 - Pir Abdul
哇没看到答案来了 - Munkhdelger Tumenbayar