jQuery是否有“exists”函数？

Question

如何检查jQuery中是否存在元素？

我目前的代码是：

if（$（选择器）.length>0）{//做点什么}

有没有更优雅的方法来处理这个问题？也许是插件或函数？

Answer 1

在JavaScript中，一切都是“真”或“假”，对于数字0方法假，其他所有真的。所以你可以写：

if（$（选择器）.length）

你不需要>0部分。

Answer 2

对！

jQuery.fn.exists=function（）{return this.length>0；}if（$（选择器）.exists（））{//做点什么}

这是为了回应：Jeff Atwood的《放牧守则》播客

Answer 3

如果您使用

jQuery.fn.exists=function（）{return（$（this）.length>0）；}if（$（选择器）.exists（））{}

你可能会暗示，如果不是这样的话，链接是可能的。

这样会更好：

jQuery.exists=函数（选择器）{return（$（选择器）.length>0）；}if（$.exists（选择器））｛｝

或者，来自FAQ:

if（$（'#myDiv'）.length）{/*做某事*/}

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

if（$（'#myDiv'）[0]）{/*做某事*/}

Answer 4

检查是否存在最快、最语义上自我解释的方法实际上是使用普通JavaScript：

if（document.getElementById（'element_id'））{//做点什么}

它的编写时间比jQuery长度替代方法长一点，但执行速度更快，因为它是本地JS方法。

它比编写自己的jQuery函数更好。出于@snover所述的原因，这种选择较慢。但它也会给其他程序员留下这样的印象：存在（）函数是jQuery固有的功能。JavaScript会/应该被其他编辑代码的人理解，而不会增加知识债务。

注意：注意缺少#在元素id（因为这是纯JS，而不是jQuery）。

Answer 5

您可以通过以下方式保存几个字节：

if（$（选择器）[0]）{…}

这是因为每个jQuery对象也伪装成一个数组，所以我们可以使用数组解引用操作符从阵列。它返回未定义的如果指定索引中没有项。

Answer 6

您可以使用：

if（$（选择器）.is（'*'））{//做点什么}

A类小的也许更优雅。

Answer 7

此插件可用于如果语句式if（$（ele）.exist（））{/*工作*/}或使用回调。

插件

;;（函数（$）{如果（！$.存在）{扩展美元({存在：函数（）{var ele、cbm存在、cbm不存在；if（arguments.length）{for（参数中的x）{switch（参数类型[x]）{案例“功能”：if（类型cbmExist==“未定义”）cbmExist=参数[x]；else cbmNotExist=参数[x]；断裂；case“对象”：if（arguments[x]实例jQuery）ele=arguments[x]；其他{var obj=参数[x]；for（obj中的y）{if（obj[y]的类型=“函数”）{if（类型cbmExist==“未定义”）cbmExist=obj[y]；else cbmNotExist=对象[y]；}if（对象类型[y]==“对象”&&obj[y]jQuery实例）ele=obj[y]；if（对象类型[y]==“字符串”）ele=$（对象[y]）；}}断裂；case“字符串”：ele=$（参数[x]）；断裂；}}}if（cbmExist的类型==“函数”）{var存在=标高长度>0？真：假；if（存在）{return ele.each（函数（i）{cbmExist.apply（this，[exist，ele，i]）；}）；}else if（cbmNotExist类型==“函数”）{cbmNotExist.apply（ele，[exist，ele]）；返回ele；}其他{如果（ele.length<=1）返回ele.lenngth>0？真：假；否则返回ele.length；}}其他{如果（ele.length<=1）返回ele.lenngth>0？真：假；否则返回ele.length；}返回false；}});$.fn.扩展({存在：函数（）{var参数=[$（this）]；if（arguments.length）for（x in arguments）args.push（argumements[x]）；返回$.exist.apply（$，args）；}});}})（jQuery）；

jsFiddle公司

您可以指定一个或两个回调。如果元素存在，则第一个元素将激发，如果元素存在，则第二个元素将激发不存在。但是，如果您选择只传递一个函数，那么它将仅在元素存在时触发。因此，如果所选元素发生变化，链将死亡不存在。当然，如果它确实存在，第一个函数将启动，链将继续。

请记住，使用回调变量有助于保持可链接性–返回元素，您可以像使用任何其他jQuery方法一样继续链接命令！

使用示例

if（$.exist（'#eleID'））｛/*DO WORK*/｝//参数为字符串if（$.exist（$（'#eleID'）））{/*DO WORK*/}//param作为jQuery OBJECTif（$（'#eleID'）.exist（））{/*DO WORK*/}//赋给jQuery OBJECT$.exist（'#eleID'，function（）{//param是STRING&&CALLBACK METHOD/*做工作*//*仅当元素存在时才会触发*/}，function（）{//param是STRING&&CALLBACK METHOD/*做工作*//*只有当元素不存在时才会触发*/})$（“#eleID”）.exist（function（）{//用CALLBACK METHOD赋给jQuery OBJECT/*做工作*//*仅当元素存在时才会触发*/})$.exist（{//param是包含2个键|值对的OBJECT：element=STRING，callback=METHOD元素：'#eleID'，回调：函数（）{/*做工作*//*仅当元素存在时才会触发*/}})

Answer 8

我看到这里的大多数答案是不准确正如他们应该做的那样，他们检查元素长度，它可以好 啊在许多情况下，但是不是100%，想象一下，如果数字传递给函数，那么我创建了一个函数原型，检查所有条件并按原样返回答案：

$.fn.exists=$.fn-exists ||函数（）{返回！！（this.length&&（HTMLDocument的这个[0]实例|| HTMLElement的这个[0实例）；}

这将检查长度和类型，现在您可以这样检查：

$（1980）.exists（）//返回false$（[1,2,3]）.exists（）//返回false$（{name:'stackoverflow'，url:'网址：http://www.stackoverflow.com'}）.exists（）//返回false$（[{nodeName:'foo'}]）.exists（）//返回false$（'div'）.exists（）//返回true$（'.header'）.exists（）//返回true$（文档）.exists（）//返回true$（'body'）.exists（）//返回true

Answer 9

实际上不需要jQuery。使用纯JavaScript，检查以下内容更容易且语义正确：

if（document.getElementById（“myElement”））{//做点什么。。。}

如果出于任何原因，您不想给元素添加id，您仍然可以使用任何其他设计用于访问DOM的JavaScript方法。

jQuery确实很酷，但不要让纯JavaScript被遗忘。。。

Answer 10

上述所有答案都需要.长度参数是它们主要使用jquery的$()幕后有querySelectorAll的选择器（或者他们直接使用它）。此方法相当慢，因为它需要解析查找的整个DOM树全部的匹配该选择器，并用它们填充数组。

['length']参数不需要也不有用，如果直接使用，代码会更快document.querySelector（选择器）相反，因为它返回它匹配的第一个元素，如果找不到，则返回null。

function elementIfExists（选择器）{//故意这样命名，请参见下文return document.querySelector（选择器）；}/*用法：*/var myelement=elementIf存在（“#myid”）||myfallbackelement；

然而，这个方法留给我们的是返回的实际对象；如果不将其保存为变量并重复使用（这样，如果我们忘记了，就可以保留引用），那么这很好。

var myel=元素If存在（“#myid”）；//现在我们正在使用对删除后仍将存在的元素的引用myel.getParentNode.removeChild（myel）；console.log（elementIfExists（“#myid”））；/*空*/console.log（myel）；/*巨大的桌子从文档中分离出来，在周围徘徊*/myel=空；/*现在可以进行垃圾收集了*/

在某些情况下，这可能是需要的。它可以在for循环中使用，如下所示：

/*本地范围内的myel即使在休息时也会收集垃圾*/对于（var myel；myel=元素IfExist（sel））；myel.getParentNode.removeChild（myel））如果（myel==myblacklistedel）中断；

如果您实际上不需要该元素，并且只想获取/存储一个true/false，只需加倍即可！！它适用于解开的鞋子，所以为什么要在这里打结？

功能元素存在（选择器）{回来！！document.querySelector（选择器）；}/*用法：*/var hastables=元素存在（“table”）；/*将为真或假*/if（hastables）{/*为漂亮的表插入css样式表*/}setTimeOut（函数（）{if（hastables&&！elementExists（“#mytablecss”））警报（“表格布局错误”）；}，3000);

Answer 11

是$.contains（）你想要什么？

jQuery.contains（容器，已包含）

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

注释：第一个参数必须是DOM元素，而不是jQuery对象或普通JavaScript对象。

Answer 12

我找到了if（$（选择器）.length）{}不够。当选择器是空对象{}.

var$target=$（{}）；console.log（$target，$target.length）；//控制台输出：// -------------------------------------//[▼对象]1//►__proto__：对象

我唯一的建议是对{}.

if（$.isEmptyObject（选择器）||$（选择器）.长度）{throw new Error（“无法使用给定选择器。”）；}

我仍然在寻找一个更好的解决方案，虽然这个有点沉重。

编辑：警告！这在IE中不起作用选择器是一个字符串。

$.isEmptyObject（'hello'）//在Chrome中为FALSE，在IE中为TRUE

Answer 13

检查元素是否存在在jQuery官方网站上有清晰的文档记录！

使用.长度您返回的jQuery集合的属性选择器：

if（$（“#myDiv”）.length）{$（“#myDiv”）.show（）；}

注意，并不总是需要测试元素是否存在。下面的代码将显示元素（如果它存在），并且不执行任何操作（没有错误）如果没有：

$（“#myDiv”）.show（）；

Answer 14

无需jQuery（基本解决方案）

if（document.querySelector（'.a-class'））{//做点什么}

下面是性能更高的选项（注意前面没有点a级).

if（document.getElementsByClassName（'a-class'）[0]）{//做点什么}

查询选择器使用适当的匹配引擎，如$()在jQuery中使用（sizzle）并使用更多的计算能力，但在99%的情况下可以做得很好。第二个选项更明确，它告诉代码要做什么https://jsbench.me/65l2up3t8i

Answer 15

灵感来自希韦的回答我想到了以下几点：

$.fn.exists=函数（）{return$.contains（document.documentElement，this[0]）；}

jQuery.contains（jQuery.contains）获取两个DOM元素并检查第一个元素是否包含第二个元素。

使用document.document元素因为第一个参数实现了存在方法，当我们只想应用它来检查当前文档中是否存在元素时。

下面，我把比较jQuery.exists（）对抗$（sel）[0]和$（sel）.长度都返回的方法真实的的值美元（4）虽然$（4）.exists（）收益假.在以下背景下检查是否存在DOM中元素的期望的结果.

$.fn.exists=函数（）{return$.contains（document.documentElement，this[0]）；}var测试函数=[函数（jq）{return！！jq[0]；}，函数（jq）{return！！jq.length；}，函数（jq）{return jq.exists（）；}，];var输入=[["$()",$()],[“$（4）”，$（4）]，[“$（'#idoexist'）”，$（'#idoex存在'）]，[“$（‘#idontexist’）”，$（‘#idontexit’）]];for（var i=0，l=inputs.length，tr，input；i<l；i++）{输入=输入[i][1]；tr=“<tr><td>”+输入[i][0]+“</td><td>”+testFuncs[0]（输入）+“</td><td>”+testFuncs[1]（输入）+“</td><td>”+testFuncs[2]（输入）+“</td></tr>”；$（“表”）.append（tr）；}

td{边框：1px实心黑色}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script>#idoexist<表格样式><tr><td>输入</td><td>$（sel）[0]</td><td>$（sel）.长度</td></tr></表格><脚本>$.fn.exists=函数（）{return$.contains（document.documentElement，this[0]）；}</script>

Answer 16

我只想使用普通的javascript来实现这一点。

函数isExists（选择器）{return document.querySelectorAll（选择器）.length>0；}

Answer 17

我有一个例子，我想看看一个对象是否存在于另一个对象的内部，所以我在第一个答案中添加了一些内容，以检查选择器中的选择器。。

//检查对象是否存在。//用法：////$（选择器）.exists（）////或者：// //$（选择器）.exists（另一个选择器）；jQuery.fn.exists=函数（选择器）{返回选择器？this.find（选择器）.length：this.length；};