有一个jQuery的“存在”function？

我如何检查jQuery中的元素的存在？

我现在的代码是这样的：

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

有没有更好的方法来解决这个问题？ 也许是一个插件或function？

Answer 1

在JavaScript中，一切都是“真理”或“虚假”，而对于数字0 （和NaN）则意味着false ，其他所有事情都是true 。 所以你可以写：

 if ($(selector).length) 

你不需要>0部分。

Answer 2

是!

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

这是为了回应： 与杰夫·阿特伍德（Jeff Atwood）合作的“牧群规范”播客

Answer 3

如果你用过

 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 */ } 

Answer 4

你可以使用这个：

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

---

 // if element does not exist if(!$('selector').length){ /* do something */ } 

Answer 5

实际上，通过使用普通的JavaScript来检查存在的最快和最具语义自我解释的方式是：

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

编写比jQuery长度要长一点，但是由于它是本地JS方法，所以执行速度更快。

而且它比编写你自己的jQuery函数更好。 这个select比较慢，因为@snover说的原因。 但是也会给其他程序员一个印象，即exists（）函数是jQuery固有的东西。 JavaScript会/应该被其他编辑你的代码的人理解，而不会增加知识债务。

注意：在element_id之前注意缺less一个'＃'（因为这是纯JS，而不是jQuery）。

Answer 6

您可以通过写入来节省几个字节：

 if ($(selector)[0]) { ... } 

这是可行的，因为每个jQuery对象也伪装成一个数组，所以我们可以使用数组解引用操作符从数组中获取第一项。 如果在指定索引处没有项目，则返回undefined 。

Answer 7

您可以使用：

 if ($(selector).is('*')) { // Do something } 

也许更高雅一点 。

Answer 8

这个插件可以在if语句中使用if ($(ele).exist()) { /* DO WORK */ }或者使用callback。

插入

 ;;(function($) { if (!$.exist) { $.extend({ exist: function() { var ele, cbmExist, cbmNotExist; if (arguments.length) { for (x in arguments) { switch (typeof arguments[x]) { case 'function': if (typeof cbmExist == "undefined") cbmExist = arguments[x]; else cbmNotExist = arguments[x]; break; case 'object': if (arguments[x] instanceof jQuery) ele = arguments[x]; else { var obj = arguments[x]; for (y in obj) { if (typeof obj[y] == 'function') { if (typeof cbmExist == "undefined") cbmExist = obj[y]; else cbmNotExist = obj[y]; } if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y]; if (typeof obj[y] == 'string') ele = $(obj[y]); } } break; case 'string': ele = $(arguments[x]); break; } } } if (typeof cbmExist == 'function') { var exist = ele.length > 0 ? true : false; if (exist) { return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); }); } else if (typeof cbmNotExist == 'function') { cbmNotExist.apply(ele, [exist, ele]); return ele; } else { if (ele.length <= 1) return ele.length > 0 ? true : false; else return ele.length; } } else { if (ele.length <= 1) return ele.length > 0 ? true : false; else return ele.length; } return false; } }); $.fn.extend({ exist: function() { var args = [$(this)]; if (arguments.length) for (x in arguments) args.push(arguments[x]); return $.exist.apply($, args); } }); } })(jQuery); 

的jsfiddle

您可以指定一个或两个callback。 如果元素存在，第一个将会触发，如果元素不存在，第二个将会触发。 但是，如果您select仅传递一个函数，则只有在元素存在时才会触发。 因此，如果选定的元素不存在，链将死亡。 当然，如果它确实存在，第一个function将会启动，链将继续。

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

示例用途

 if ($.exist('#eleID')) { /* DO WORK */ } // param as STRING if ($.exist($('#eleID'))) { /* DO WORK */ } // param as jQuery OBJECT if ($('#eleID').exist()) { /* DO WORK */ } // enduced on jQuery OBJECT $.exist('#eleID', function() { // param is STRING && CALLBACK METHOD /* DO WORK */ /* This will ONLY fire if the element EXIST */ }, function() { // param is STRING && CALLBACK METHOD /* DO WORK */ /* This will ONLY fire if the element DOES NOT EXIST */ }) $('#eleID').exist(function() { // enduced on jQuery OBJECT with CALLBACK METHOD /* DO WORK */ /* This will ONLY fire if the element EXIST */ }) $.exist({ // param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD element: '#eleID', callback: function() { /* DO WORK */ /* This will ONLY fire if the element EXIST */ } }) 

Answer 9

实际上并不需要jQuery。 使用普通的JavaScript，检查是否更容易和语义正确：

 if(document.getElementById("myElement")) { //Do something... } 

如果由于某种原因，您不想将id添加到元素中，则仍然可以使用任何旨在访问DOM的其他JavaScript方法。

jQuery真的很酷，但不要让纯粹的JavaScript陷入遗忘之中。

Answer 10

所有以前的答案需要.length参数的原因是，他们大多使用jquery的$()select器，后面的窗帘（或他们直接使用它）querySelectorAll。 这个方法相当慢，因为它需要parsing整个DOM树，寻找与该select器相匹配的所有匹配项，并用它们填充一个数组。

如果直接使用document.querySelector(selector) ，代码将会快很多，因为它返回匹配的第一个元素，如果没有find则返回null，['length']参数不是必需的或有用的。

 function elementIfExists(selector){ //named this way on purpose, see below return document.querySelector(selector); } /* usage: */ var myelement = elementIfExists("#myid") || myfallbackelement; 

然而这种方法留给我们的是实际的对象被返回; 如果它不会被保存为variables并且被重复使用（因此如果我们忘记了，那么保留参考），这是很好的。

 var myel=elementIfExists("#myid"); // now we are using a reference to the element which will linger after removal myel.getParentNode.removeChild(myel); console.log(elementIfExists("#myid")); /* null */ console.log(myel); /* giant table lingering around detached from document */ myel=null; /* now it can be garbage collected */ 

在某些情况下，这可能是需要的。 它可以像这样用于循环：

 /* locally scoped myel gets garbage collected even with the break; */ for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel)) if (myel == myblacklistedel) break; 

如果你实际上并不需要这个元素，并且只想得到/存储一个真/假，那么就不要这样做！ 它适用于解开鞋子，所以为什么打结在这里？

 function elementExists(selector){ return !!document.querySelector(selector); } /* usage: */ var hastables = elementExists("table"); /* will be true or false */ if (hastables){ /* insert css style sheet for our pretty tables */ } setTimeOut(function (){if (hastables && !elementExists("#mytablecss")) alert("bad table layouts");},3000); 

Answer 11

你可以使用这个：

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){/*do something*/} 

Answer 12

我发现if ($(selector).length) {}是不够的。 当selector是一个空对象时，它会默默地破坏你的应用程序{} 。

 var $target = $({}); console.log($target, $target.length); // Console output: // ------------------------------------- // [▼ Object ] 1 // ► __proto__: Object 

我唯一的build议是对{}进行额外的检查。

 if ($.isEmptyObject(selector) || !$(selector).length) { throw new Error('Unable to work with the given selector.'); } 

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

编辑： 警告！ 当selector是string时，这在IE中不起作用。

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE 

Answer 13

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

jQuery.contains（容器，包含）

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

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

Answer 14

你可以在java脚本中检查元素是否存在或不使用长度。 如果长度大于零，则元素存在，如果长度为零，则元素不存在

 // These by Id if( $('#elementid').length > 0){ // Element is Present }else{ // Element is not Present } // These by Class if( $('.elementClass').length > 0){ // Element is Present }else{ // Element is not Present } 

Answer 15

 $(selector).length && //Do something 

Answer 16

这与所有的答案非常相似，但是为什么不使用! 运算符两次，所以你可以得到一个布尔值：

 jQuery.fn.exists = function(){return !!this.length}; if ($(selector).exists()) { // the element exists, now what?... } 

Answer 17

尝试testingDOM元素

 if (!!$(selector)[0]) // do stuff 

Answer 18

受到Hiway的回答启发，我想出了以下几点：

 $.fn.exists = function() { return $.contains( document.documentElement, this[0] ); } 

jQuery.contains需要两个DOM元素，并检查第一个是否包含第二个元素。

使用document.documentElement作为第一个参数来实现exists方法的语义，当我们只想将其应用于检查当前文档中是否存在元素时。

下面，我把一个片段比较了jQuery.exists()和$(sel)[0]和$(sel).length方法，它们都返回$(4) truthy值，而$(4).exists()返回false 。 在检查 DOM中是否存在元素的情况下，这似乎是期望的结果 。

 $.fn.exists = function() { return $.contains(document.documentElement, this[0]); } var testFuncs = [ function(jq) { return !!jq[0]; }, function(jq) { return !!jq.length; }, function(jq) { return jq.exists(); }, ]; var inputs = [ ["$()",$()], ["$(4)",$(4)], ["$('#idoexist')",$('#idoexist')], ["$('#idontexist')",$('#idontexist')] ]; for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) { input = inputs[i][1]; tr = "<tr><td>" + inputs[i][0] + "</td><td>" + testFuncs[0](input) + "</td><td>" + testFuncs[1](input) + "</td><td>" + testFuncs[2](input) + "</td></tr>"; $("table").append(tr); } 

 td { border: 1px solid black } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="idoexist">#idoexist</div> <table style> <tr> <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td> </tr> </table> <script> $.fn.exists = function() { return $.contains(document.documentElement, this[0]); } </script> 

Answer 19

我在这里看到的大多数答案是不准确的，他们检查元素的长度，在很多情况下可以，但不是100％，想象一下，如果数字传递给函数，所以我创build了一个检查所有函数的函数条件并返回答案，因为它应该是：

 $.fn.exists = $.fn.exists || function() { return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); } 

这将检查长度和types，现在你可以这样检查：

 $(1980).exists(); //return false $([1,2,3]).exists(); //return false $({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false $([{nodeName: 'foo'}]).exists() // returns false $('div').exists(); //return true $('.header').exists(); //return true $(document).exists(); //return true $('body').exists(); //return true 

Answer 20

我有一个情况，我想看看是否有一个对象存在于另一个内部，所以我添加了一些东西到第一个答案检查select器内的select器..

 // Checks if an object exists. // Usage: // // $(selector).exists() // // Or: // // $(selector).exists(anotherSelector); jQuery.fn.exists = function(selector) { return selector ? this.find(selector).length : this.length; }; 

Answer 21

我只是喜欢用普通的香草JavaScript来做到这一点。

 function isExists(selector){ return document.querySelectorAll(selector).length>0; } 

Answer 22

怎么样：

 function exists(selector) { return $(selector).length; } if (exists(selector)) { // do something } 

这是非常简单的，并且可以避免每次都用$()包含select器。

Answer 23

我偶然发现了这个问题，我想分享我目前使用的代码片段：

 $.fn.exists = function(callback) { var self = this; var wrapper = (function(){ function notExists () {} notExists.prototype.otherwise = function(fallback){ if (!self.length) { fallback.call(); } }; return new notExists; })(); if(self.length) { callback.call(); } return wrapper; } 

而现在我可以写这样的代码 –

 $("#elem").exists(function(){ alert ("it exists"); }).otherwise(function(){ alert ("it doesn't exist"); }); 

它可能看起来很多代码，但是当用CoffeeScript编写时，它是非常小的：

 $.fn.exists = (callback) -> exists = @length callback.call() if exists new class otherwise: (fallback) -> fallback.call() if not exists 

Answer 24

我正在使用这个：

  $.fn.ifExists = function(fn) { if (this.length) { $(fn(this)); } }; $("#element").ifExists( function($this){ $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')}); } ); 

仅当存在jQuery元素时才执行链 – http://jsfiddle.net/andres_314/vbNM3/2/

Answer 25

检查一个元素的存在被整齐地logging在jQuery官方网站上！

使用select器返回的jQuery集合的.length属性：

 if ($("#myDiv").length) { $("#myDiv").show(); } 

请注意，并不总是需要testing一个元素是否存在。 下面的代码将显示元素是否存在，如果不存在则不做任何事情（没有错误）：

 $("#myDiv").show(); 

Answer 26

不需要jQuery

 if(document.querySelector('.a-class')) { // do something } 

Answer 27

 if ( $('#myDiv').size() > 0 ) { //do something } 

size()计算select器返回的元素的数量

Answer 28

这是我在jQuery中最喜欢的exist方法

 $.fn.exist = function(callback) { return $(this).each(function () { var target = $(this); if (this.length > 0 && typeof callback === 'function') { callback.call(target); } }); }; 

和其他版本，当select器不存在时支持callback

 $.fn.exist = function(onExist, onNotExist) { return $(this).each(function() { var target = $(this); if (this.length > 0) { if (typeof onExist === 'function') { onExist.call(target); } } else { if (typeof onNotExist === 'function') { onNotExist.call(target); } } }); }; 

例：

 $('#foo .bar').exist( function () { // Stuff when '#foo .bar' exists }, function () { // Stuff when '#foo .bar' does not exist } ); 

Answer 29

$("selector" ）给出具有length数据的对象。 如果在select器中定义了元素，则将从对象中获取它们。 所以，如果你检查它的长度，你已经可以find，是否有任何元素存在。 在javascript 0 == false也null == false 。 如果你没有得到0你的代码将运行。

 if($("selector").length){ //code in the case } 

Answer 30

是这样做的最好方法：

通过JQuery ：

 if($("selector").length){ //code in the case } 

selector可以是Element ID或Element Class

要么

如果你不想使用jQuery库，那么你可以通过使用核心JavaScript来实现：

通过JavaScript ：

 if(document.getElementById("ElementID")) { //Do something... }