有一个jQuery的“存在”function?

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

我现在的代码是这样的:

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

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

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

 if ($(selector).length) 

你不需要>0部分。

是!

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

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

如果你用过

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

你可以使用这个:

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

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

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

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

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

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

注意:在element_id之前注意缺less一个'#'(因为这是纯JS,而不是jQuery)。

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

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

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

您可以使用:

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

也许更高雅一点

这个插件可以在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 */ } }) 

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

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

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

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

所有以前的答案需要.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); 

你可以使用这个:

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

我发现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 

是$ .contains()你想要什么?

jQuery.contains(容器,包含)

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

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

你可以在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 } 
 $(selector).length && //Do something 

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

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

尝试testingDOM元素

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

受到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> 

我在这里看到的大多数答案是不准确的,他们检查元素的长度,在很多情况下可以,但不是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 

我有一个情况,我想看看是否有一个对象存在于另一个内部,所以我添加了一些东西到第一个答案检查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; }; 

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

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

怎么样:

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

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

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

 $.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 

我正在使用这个:

  $.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/

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

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

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

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

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

不需要jQuery

 if(document.querySelector('.a-class')) { // do something } 
 if ( $('#myDiv').size() > 0 ) { //do something } 

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

这是我在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 } ); 

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

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

是这样做的最好方法:

通过JQuery

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

selector可以是Element IDElement Class

要么

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

通过JavaScript

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