jQuery有“存在”函数吗？

耶！

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

这是为了响应：放牧代码播客与杰夫·阿特伍德

您可以使用：

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

小更优雅，也许。

如果你使用

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

你会暗示链接是可能的，当它不是。

这样会更好：

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

或者，从FAQ：

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

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

if ( $('#myDiv')[0] ) { /* Do something */ }

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

size()计算选择器返回的元素数

在JavaScript中，一切都是“true”或“false sy”，对于数字0意味着false，其他一切true。所以你可以写：

if ($(selector).length)

你不需要那个>0部分。

你可以使用这个：

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

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

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

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

如果出于任何原因您不想将id放在元素中，您仍然可以使用任何其他旨在访问DOM的JavaScript方法。

jQuery真的很酷，但不要让纯JavaScript被遗忘。

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

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

它比jQuery长度替代方案写得长一点，但执行速度更快，因为它是本机JS方法。

它比编写自己的jQuery函数要好。出于@s的原因，这种替代方案较慢。但它也会给其他程序员留下这样的印象，即exists()函数是jQuery固有的东西。JavaScript将/应该被编辑您的代码的其他人理解，而不会增加知识债务。

NB：请注意在element_id之前缺少“#”（因为这是纯JS，而不是jQuery）。

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

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

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

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

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

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

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

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

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

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

我正在使用这个：

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

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

插件

;;(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

你可以指定一个或两个回调。如果元素存在，第一个回调将被触发，如果元素没有存在，第二个回调将被触发。但是，如果你选择只传递一个函数，它只会在元素存在时被触发。因此，如果选定的元素没有存在，链将死亡。当然，如果它确实存在，第一个函数将被触发，链将继续。

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

示例用途

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRINGif ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECTif ($('#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 = METHODelement: '#eleID',callback: function() {/*    DO WORK    *//*    This will ONLY fire if the element EXIST    */}})

你可以使用这个：

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

#0你想要什么？

jQuery.contains( container, contained )

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

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

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

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

这是有效的，因为每个jQuery对象也伪装成一个数组，所以我们可以使用数组取消引用运算符从阵列中获取第一个项目。如果指定索引处没有项目，它将返回undefined。

不如：

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

它非常小，并且每次都必须用$()包围选择器。

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

$.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 = @lengthcallback.call() if existsnew classotherwise: (fallback) ->fallback.call() if not exists

前面所有答案都需要.length参数的原因是它们主要使用jQuery的$()选择器，该选择器在窗帘后面有querySelectorAll（或者他们直接使用它）。此方法相当慢，因为它需要解析整个DOM树，寻找与该选择器匹配的所有并用它们填充数组。

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

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

然而，这个方法让我们返回实际对象；如果它不会被保存为变量并重复使用（因此如果我们忘记了，可以保留引用），这很好。

var myel=elementIfExists("#myid");// now we are using a reference to the element which will linger after removalmyel.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 */

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

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

如果你实际上并不需要这个元素，并且想要获取/存储一个true/false，那就加倍不是它！！它适用于松开的鞋子，所以为什么要在这里打结呢？

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.exists = function(){return !!this.length};
if ($(selector).exists()) {// the element exists, now what?...}

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

// These by Idif ($("#elementid").length > 0) {// Element is Present} else {// Element is not Present}
// These by Classif ($(".elementClass").length > 0) {// Element is Present} else {// Element is not Present}

尝试测试DOM元素

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>

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

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

和其他支持选择器不存在时回调的版本

$.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属性的对象。如果选择器找到任何元素，它们将包含在对象中。因此，如果您检查其长度，您可以查看是否存在任何元素。在JavaScript0 == false中，因此，如果您没有获得0，您的代码将运行。

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

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

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

是这样做的最佳方法：

通过JQuery：

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

selector可以是ElementID或ElementClass

或

如果你不想使用jQuery库，那么你可以通过使用CoreJavaScript来实现这一点：

通过JavaScript：

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

这里是不同情况的完整示例，以及使用Direct if on jQuery选择器检查元素是否存在的方法，因为它返回数组或元素，所以可能会或可能不会工作。

var a = null;
var b = []
var c = undefined ;
if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}// output: a doesn't exit
if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}// output: b exist
if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}// output: c doesn't exit

最终解决方案

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }//output : xusyxxs doesnn't exist
if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }//output : xusyxxs doesnn't exist

Demo

console.log("existing id", $('#id-1').length)console.log("non existing id", $('#id-2').length)
console.log("existing class single instance", $('.cls-1').length)console.log("existing class multiple instance", $('.cls-2').length)console.log("non existing class", $('.cls-3').length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="id-1"><div class="cls-1 cls-2"></div><div class="cls-2"></div></div>

使用以下语法使用jQuery检查元素是否实际存在。

let oElement = $(".myElementClass");if(oElement[0]) {// Do some jQuery operation here using oElement}else {// Unable to fetch the object}

无需jQuery（基本解决方案）

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

下面的选项性能更高（注意a-class之前缺少点）。

if(document.getElementsByClassName('a-class')[0]) {// do something}

querySelector在jQuery中使用了像$()（嘶嘶声）这样合适的匹配引擎，并且使用了更多的计算能力，但在99%的情况下会做得很好。第二个选项更明确，并准确地告诉代码该做什么。根据JSBenchhttps://jsbench.me/65l2up3t8i，它要快得多

检查一个元素是否存在整齐地记录在jQuery官方网站本身中！

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

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

请注意，并不总是需要测试元素是否存在。以下代码将显示元素是否存在，并且什么也不做（没有错误）如果没有：

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

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

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

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

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

你不必像$(selector).length > 0、$(selector).length那样检查它是否大于0，这就足够了，也是检查元素存在的一种优雅方式。我认为只为此编写一个函数是不值得的，如果你想做更多额外的事情，那么是的。

if($(selector).length){// true if length is not 0} else {// false if length is 0}

用于id和类选择器的简单实用函数。

function exist(IdOrClassName, IsId) {var elementExit = false;if (IsId) {elementExit = $("#" + "" + IdOrClassName + "").length ? true : false;} else {elementExit = $("." + "" + IdOrClassName + "").length ? true : false;}return elementExit;}

像这样调用这个函数

$(document).ready(function() {$("#btnCheck").click(function() {//address is the id so IsId is true. if address is class then need to set IsId falseif (exist("address", true)) {alert("exist");} else {alert("not exist");}});});

所有答案都是没有工作防弹检查jQuery中元素的存在。经过多年的编码，只有这个解决方案不会抛出任何关于存在与否的警告：

if($(selector).get(0)) { // Do stuff }

或者在函数的开头保释：

if(!$(selector).get(0)) return;

解释

在这种情况下，您不必处理零|空长度问题。这强制获取一个元素，而不是计算它们。

如果输入不存在，它将没有值。试试这个…

if($(selector).val())

试试这个。

简单和短和可用于整个项目：

jQuery.fn.exists=function(){return !!this[0];}; //jQuery Plugin

用法：

console.log($("element-selector").exists());

__________________________________________________________________________________________________________________________

甚至更短：（何时你不想定义一个jQuery插件）：

if(!!$("elem-selector")[0]) ...;

甚至

if($("elem-selector")[0]) ...;

使用querySelectorAll和forEach，不需要if和额外的赋值：

document.querySelectorAll('.my-element').forEach((element) => {element.classList.add('new-class');});

与之相反：

const myElement = document.querySelector('.my-element');if (myElement) {element.classList.add('new-class');}

我正在使用这个：

 if($("#element").length > 0){//the element exists in the page, you can do the rest....}

它非常简单，很容易找到一个元素。

只需检查选择器的长度，如果它大于0，则返回true，否则返回false。

对于ID：

 if( $('#selector').length )         // use this if you are using id to check{// it exists}

上课时间：

 if( $('.selector').length )         // use this if you are using class to check{// it exists}

对于Dropdown：

if( $('#selector option').size() ) {   // use this if you are using dropdown size to check
// it exists}

使用jQuery，你不需要>0，这就是你所需要的：

if ($(selector).length)

使用vanilla JS，您可以使用以下命令执行相同的操作：

if(document.querySelector(selector))

如果你想把它变成一个返回bool的函数：

const exists = selector => !!document.querySelector(selector);
if(exists(selector)){// some code}

默认情况下-否。

length属性通常用于相同的结果，如下所示：

if ($(selector).length)

在这里，'selector'将被您感兴趣的实际选择器替换，如果它存在或不存在。如果它确实存在，长度属性将输出一个大于0的整数，因此if语句将变为true并因此执行if块。如果它不存在，它将输出整数'0'，因此if块不会执行。

我发现这是最jQuery方式，IMHO。扩展默认函数很容易，可以在全局扩展文件中完成。

$.fn.exist = function(){return !!this.length;};
console.log($("#yes").exist())
console.log($("#no").exist())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="yes">id = yes</div>

有一种被称为短路调节的奇怪现象。没有多少人知道这个功能，所以请允许我解释一下！<3

//you can check if it isnt defined or if its falsy by using ORconsole.log( $(selector) || 'this value doesnt exist' )
//or run the selector if its true, and ONLY trueconsole.log( $(selector) && 'this selector is defined, now lemme do somethin!' )
//sometimes I do the following, and see how similar it is to SWITCHconsole.log(({  //return something only if its in the method name'string':'THIS is a string','function':'THIS is a function','number':'THIS is a number','boolean':'THIS is a boolean'})[typeof $(selector)]||//skips to this value if object above is undefined'typeof THIS is not defined in your search')

最后一位让我看到我的typeof有什么样的输入，并在该列表中运行。如果我的列表之外有一个值，我使用OR (||)运算符跳过并取消。这与Switch Case具有相同的性能，被认为有点简洁。测试条件的性能和逻辑运算符的使用。

附注：对象函数必须重写>.<'但是我构建的这个测试是为了研究简洁和表达的条件反射。

资源：逻辑与（带短路评估）

感谢分享，首先检查的方式有很多种，如果您想检查DOM中是否存在HTML元素。为此，您可以尝试以下方法。

1. 使用Id选择器：在DOM中按id选择元素，您应该提供以前缀(#)开头的id的名称。您必须确保DOM中的每个Html元素都必须具有唯一的id。
2. 使用class选择器：您可以使用前缀(.)选择属于特定类的所有元素。

现在，如果您想检查元素是否存在于DOM中，您可以使用以下代码进行检查。

if($("#myId").length){//id selector}
if($(".myClass").length){//class selector} 

如果您想检查任何变量是否未定义。您可以使用以下代码检查它。

let xif(x)console.log("X");elseconsole.log("X is not defined");

在javascript

if (typeof selector != "undefined") {console.log("selector exists");} else {console.log("selector does not exists");}

在jQuery

if($('selector').length){alert("selector exists");} else{alert("selector does not exists");}

不，没有这样的方法。但你可以为自己的方法扩展jQuery。目前的方法（2022年）是：

jQuery.fn.extend({exists() { return !!this.length }});