检查元素是否存在 | CSS-Tricks

if ($('#myElement').length > 0) { 
    // it exists 
}

或者将其制作成一个带有回调的精美函数

// Tiny jQuery Plugin
// by Chris Goodchild
$.fn.exists = function(callback) {
  var args = [].slice.call(arguments, 1);

  if (this.length) {
    callback.call(this, args);
  }

  return this;
};

// Usage
$('div.test').exists(function() {
  this.append('<p>I exist!</p>');
});

Nathan

# 2009 年 9 月 4 日

您不需要“> 0”，您可以简单地写

if ( $('#myElement').length ) { // 它存在 }

Eliazer

评论永久链接# 2010 年 2 月 18 日

不正确，因为 jQuery 始终返回一个长度为 0 的对象
radiance

评论永久链接# 2011 年 7 月 4 日

这是真的。如果元素存在：length > 0，并且条件为真。
如果元素不存在：length = 0，并且条件为假
Kevin Redman

评论永久链接# 2012 年 11 月 26 日

这是正确的。您不需要说 length > 0，因为 1 = true，0 = false。

Eliazer，您可能只是听到有人说“JQuery 始终返回一个对象”，因此您认为 jQuery 的每个函数都返回一个对象。jQuerys 默认选择器“$()”始终如此。但是，它的函数并不总是……例如“has”和“is”……或者“length”

Length 返回 0 或 1，并且由于 1 = true，0 = false。
ben

评论永久链接# 2015 年 4 月 2 日

非常好。
感谢 Nathan。

Juan Trigueros

# 2010 年 11 月 5 日

甚至更容易和可重用，您可以定义一个函数

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

并在任何地方使用它，就像这样

if ($(‘#myElemento).existe()) { … }

Chris 高兴

评论永久链接# 2016 年 8 月 8 日

嗯，我认为我在您评论的最后一行中看到一个拼写错误
if ($(‘#myElemento).existe()) { … }
应该是
if ($(‘#myElemento).exists()) { … }
（existe 与 exists 相比）

Jonathan Fontes

# 2011 年 1 月 13 日

更好，

if($(element).size()){
// …
}

Mathias Bynens

评论永久链接# 2011 年 5 月 27 日

这根本不好。jQuery#size 只是返回 length 属性，所以只需保存函数调用并直接访问 length 属性。

El garch Hicham

# 2011 年 3 月 3 日

不错的教程 :P

Skorney

# 2012 年 2 月 14 日

但是为什么不使用 $('#myElement')[0]？ - 返回第一个 DOM 元素或 undefined，我认为。

Germano

# 2012 年 6 月 15 日

我使用这个
if($(“element”)[0] || $(“element”)[0])
{
// 做点什么
}

附注：多个元素的示例

jure

# 2012 年 7 月 3 日

我认为“!=”比“>”性能更好，您怎么看？

if ( $(‘#myElement’).length != 0 ) {
// 它存在
}

point

# 2012 年 8 月 12 日

0 表示“假”
>= 1 表示“真”

if( $(‘#selector’).length )
{
// 如果 length >= 1，则执行
}
else
{
// 如果 length = 0，则执行
}

Jordi

# 2012 年 9 月 18 日

嗨，伙计们，这种检查很棒，但我有点疯狂，想知道如何在 DOM 上下文中创建元素时触发该函数。基本上，我想在文档中出现 iframe 时停止 #something.cycle（来自 js 直播编辑器）……

N8

评论永久链接# 2014 年 4 月 9 日

Jordi，
您是否弄清楚了如何在创建元素时触发函数？我自己也遇到了这个问题，没有找到太多有用的信息。

谢谢，
-N8
Chris 高兴

评论永久链接# 2016 年 8 月 8 日

这可能会有所帮助

http://stackoverflow.com/questions/14667770/how-to-call-a-javascript-function-when-iframe-finished-loading

http://stackoverflow.com/questions/6386128/how-can-i-call-a-function-after-an-element-has-been-created-in-jquery

Avennida Gez

# 2013 年 5 月 8 日

伙计们，我使用过这个，但它不起作用
它没有被检测到

if($(‘#body’).length) bla bla
当然，如果我在 body 标签中使用 id body，它会起作用，但如果它没有 id=’body’，则此检测器根本不起作用

Fyodor

评论永久链接# 2013 年 7 月 10 日

始终意味着您正在匹配 id。您应该使用 $(‘body’) 而不是 $(‘#body’)

fever

# 2013 年 7 月 9 日

这个函数是否与“live”或“bind”一起使用？

Fyodor

评论永久链接# 2013 年 7 月 10 日

我还没有检查过，但它应该可以，因为它返回的是“this”;
Gayathri

评论永久链接# 2017 年 12 月 20 日

live esdck

Amrit Deep

# 2013 年 11 月 18 日

嘿，这段代码不起作用
$(‘#stop’).bind(‘click’, function(){
stopMove();
jQuery.fn.exists = function(){return this.length>0;}

    if($('#fifteen').exists()){
        alert("fifteen");
    }
    else if($('#thirty').exists()){
        alert("thirty");
    }
    else if($('#forty_five').exists()){
        alert("forty_five");
    }
    else if($('#sixty').exists()){
        alert("sixty");
    }
    else {
        alert("nothings");
    }

Ripul

# 2014 年 1 月 23 日

需要一点帮助。我已经使用它大约 1000 次了，但这次仍然无法正确使用它
我的 if 语句如下所示

if($(‘#s’+user_id + ‘ .course_stats_user’).length > 0){

}

‘#s’+user_id + ‘ .course_stats_user’ 不存在，但它仍然进入了 if 循环……有什么想法吗？

NVM.. 现在已经解决了..

David

# 2014 年 3 月 11 日

我花了很多时间摸索这个……感谢 CSS-Tricks 传播宝贵的知识！

Bert

# 2014 年 6 月 2 日

使用 .exists() 似乎是比 .length 更合乎逻辑的选择，不是吗？

Đan Trường

# 2014 年 12 月 7 日

我在讨论中看到很多方法来使用 jquery 检查 div 的 ID。
我尝试了测试，所有方法都是正确的。
我使用 if( $(‘#myElement’).length) 来快速使用。
感谢您的精彩帖子。

Max

# 2017 年 2 月 20 日

一篇有用的帖子，特别是 exists() 函数。上面没有明确提到，但值得说明的是，exists() 方法是可以链接的。

对该方法进行一个小调整/安全检查，即检查传递的第一个参数是否实际上是一个函数

$.fn.exists = function(callback) {
  var args = [].slice.call(arguments, 1);

  if (this.length && typeof callback === 'function') {
    callback.call(this, args);
  }

  return this;
};

评论

发表评论 取消回复

发表评论取消回复