jQuery 有“存在”函数吗?

IT技术 javascript jquery
2021-01-31 20:27:35

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

我目前的代码是这样的:

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

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

6个回答

在 JavaScript 中,一切都是“真”或“假”,而对于数字,则0意味着false其他一切true所以你可以写:

if ($(selector).length)

你不需要那>0部分。

@abhirathore2006 如果您使用 id 选择器并且该元素不存在,则长度为 0 并且不会引发异常。
2021-03-10 20:27:35
@Robert,那是因为实际上NaN != a何时a任何值。
2021-03-19 20:27:35
@James 那是因为[].toString() === [].join(',') === """" === ""
2021-03-21 20:27:35
有趣的是NaN != false
2021-04-06 20:27:35

是的!

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

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

这是对以下内容的回应:与 Jeff Atwood 的 Herding Code 播客

@redsquare:代码可读性是在 jQuery 上添加此类功能的最佳理由。拥有称为.exists干净的东西,而.length读取为语义不同的东西,即使语义与相同的结果一致。
2021-03-10 20:27:35
在我看来,从“大于零的列表长度”的概念到“我为存在编写选择器的元素”的概念,这至少是一种逻辑间接。是的,它们在技术上是一回事,但概念抽象处于不同的水平。这会导致一些人更喜欢更明确的指标,即使要付出一些性能代价。
2021-03-21 20:27:35
@quixoto,抱歉, .length 是许多不需要包装的语言的标准。你如何解释.length?
2021-03-26 20:27:35
您的$.fn.exists示例是用两个函数调用替换属性查找(便宜!),这两个函数调用要贵得多——其中一个函数调用重新创建了一个您已经拥有的 jQuery 对象,这很愚蠢。
2021-03-31 20:27:35
我只是写: if( $(selector).length ){ ... } 没有 '> 0'
2021-04-03 20:27:35

如果你使用

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

你会暗示链接是可能的,而事实并非如此。

这样会更好:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

或者,从常见问题解答

if ( $('#myDiv').length ) { /* Do something */ }

您还可以使用以下内容。如果 jQuery 对象数组中没有值,则获取数组中的第一项将返回 undefined。

if ( $('#myDiv')[0] ) { /* Do something */ }
你到底为什么需要链接它?$(".missing").css("color", "red")已经做了正确的事情......(即什么都没有)
2021-04-02 20:27:35
已经存在不可链接的方法,例如 attr 和 data 函数。不过,我确实明白您的观点,而且不管怎样,我只是测试长度 > 0。
2021-04-05 20:27:35

你可以使用这个:

// if element exists
if($('selector').length){ /* do something */ }

// if element does not exist
if(!$('selector').length){ /* do something */ }
你没看到 Tim Büthe 早在你两年前就已经给出了这个答案吗?
2021-03-21 20:27:35
Pfft,Tim 从未展示过如何测试元素是否不存在。
2021-03-24 20:27:35

检查存在的最快和最语义上的自我解释方法实际上是使用 plain JavaScript

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

它的编写时间比 jQuery 长度替代方案要长一些,但由于它是原生 JS 方法,因此执行速度更快。

它比编写自己的jQuery函数更好出于@snover 所述的原因,该替代方案较慢。但它也会给其他程序员一个印象,即该exists()函数是 jQuery 固有的。JavaScript编辑您的代码的其他人会/应该理解,而不会增加知识债务。

注意:请注意element_id(因为这是普通的 JS,而不是jQuery)之前缺少“#”

还记得我们只有 document.getElementById 的美好时光吗?而且我总是忘记文件。并且无法弄清楚为什么它不起作用。而且我总是拼写错误并且字符大小写错误。
2021-03-18 20:27:35
JS 引擎中的速度论点只会在没有 jQuery 的情况下无法运行的人的脑海中消失,因为这是他们无法获胜的论点。
2021-03-29 20:27:35
完全不是一回事。JQuery 选择器可用于任何 CSS 规则——例如$('#foo a.special')它可以返回多个元素。getElementById不能开始接近那个。
2021-04-02 20:27:35
@Nozif(document.querySelector("#foo a.special"))会起作用。不需要jQuery。
2021-04-05 20:27:35