如何检查jQuery中元素的存在？
我现在的代码是：
if ($(selector).length > 0) {
// Do something
}
有没有更优雅的方式来处理这个问题？也许是插件或函数？
Yes!
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
这是对杰夫·阿特伍德主持的《放牧守则》播客的回应
如果您使用
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 */ }
在JavaScript中，一切都是“truthy”或“falsy”，对于数字0表示假，其他一切都是真。所以你可以写：
if ($(selector).length)
你不需要那>0部分。
您可以使用此选项：
// if element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }
实际上不需要jQuery。使用纯JavaScript，检查以下内容更容易且语义正确：
if(document.getElementById("myElement")) {
//Do something...
}
如果出于任何原因，您不想在元素中添加id，那么您仍然可以使用任何其他JavaScript方法来访问DOM。
jQuery确实很酷，但不要让纯JavaScript被遗忘。。。
检查是否存在的最快和最语义自解释的方法实际上是使用普通JavaScript：
if (document.getElementById('element_id')) {
// Do something
}
它比jQuery长度替代方案要长一点，但执行速度更快，因为它是一个原生JS方法。
它比编写自己的jQuery函数要好。出于snover所说的原因，这种替代方案要慢一些。但这也会给其他程序员留下这样的印象：exists（）函数是jQuery固有的东西。JavaScript会/应该被其他编辑代码的人理解，而不会增加知识债务。
注意：注意element_id前面缺少“#”（因为这是纯JS，而不是jQuery）。
我发现if（$（selector）.length）｛｝不够。当选择器为空对象｛｝时，它将自动中断应用程序。
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.');
}
我仍然在寻找一个更好的解决方案，尽管这个有点重。
编辑：警告！当选择器是字符串时，这在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;
};
我正在使用这个：
$.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 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.fn.extend({
exists: function() { return this.length }
});
if($(selector).exists()){/*do something*/}
$.contains（）是您想要的吗？
jQuery.incontains（容器，已包含）如果第二个参数提供的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 = @length
callback.call() if exists
new class
otherwise: (fallback) ->
fallback.call() if not exists
前面的所有答案都需要.length参数的原因是，它们主要使用jquery的$（）选择器，该选择器在窗帘后面有querySelectorAll（或者直接使用）。此方法相当慢，因为它需要解析整个DOM树，查找与该选择器的所有匹配项，并用它们填充数组。
['length']参数不是必需的或有用的，如果直接使用document.querySelector（selector），代码会更快，因为它返回匹配的第一个元素，如果找不到则返回null。
function elementIfExists(selector){ //named this way on purpose, see below
return 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 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 */
在某些情况下，这可能是需要的。它可以在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 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
}
受到海威回答的启发，我想到了以下几点：
$.fn.exists = function() {
return $.contains( document.documentElement, this[0] );
}
jQuery.contains获取两个DOM元素，并检查第一个元素是否包含第二个元素。
当我们希望仅应用document.documentElement来检查当前文档中元素的存在时，使用document.documentsElement作为第一个参数可以实现exists方法的语义。
下面，我将jQuery.exists（）与$（sel）[0]和$（sel）.length方法进行了比较，这两种方法都返回了$（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)],[“$（'#idexist'）”，$（'#idexist]）]，[“$（'#idotexist'）”，$（'#idotexit'）]];for（变量i=0，l=inputs.length，tr，input；i<l；i++）{input=输入[i][1]；tr=“<tr><td>”+输入[i][0]+“</td><td]”+testFuncs[0]（输入）+“</td><td>”+testFuncs[1]（输入）+“</td><td>”+testFuncs[2]（输入）+“</td></tr>”；$（“table”）.append（tr）；}td｛border:1px实心黑色｝<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“idexist”>#idexist</div>＜表格样式＞<tr><td>输入</td><td>$（sel）[0]</td><td>$（sel）.length</td><td>$（sel）.exists（）</td></tr></table><脚本>$.fn.exists=函数（）{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”）返回一个具有长度属性的对象。如果选择器找到任何元素，它们将包含在对象中。所以如果你检查它的长度，你可以看到是否有元素存在。在JavaScript中，0==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
}
选择器可以是元素ID或元素类
OR
如果您不想使用jQuery Library，那么可以通过使用Core JavaScript实现这一点：
通过JavaScript：
if(document.getElementById("ElementID")) {
//Do something...
}
这里是不同情况的完整示例，以及使用jQuery选择器上的direct-if检查元素是否存在的方法，因为它返回数组或元素，所以它可能工作，也可能不工作。
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（“现有id”，$（'#id-1'）.length）console.log（“非现有id”，$（'#id-2'）.length）console.log（“现有类单个实例”，$（'.cls-1'）.length）console.log（“现有类多实例”，$（'.cls-2'）.length）console.log（“非现有类”，$（'.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-1cls-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类前面没有点）。
if(document.getElementsByClassName('a-class')[0]) {
// do something
}
querySelector在jQuery中使用了一个适当的匹配引擎，比如$（）（sizzle），并使用了更多的计算能力，但在99%的情况下都会很好。第二个选项更加明确，并且告诉代码要做什么https://jsbench.me/65l2up3t8i
检查元素的存在在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
您不必检查它是否大于0，例如$（selector）.length>0，$（selected）.llength，这就足够了，是检查元素存在的一种优雅方式。我认为仅为此编写函数是不值得的，如果你想做更多额外的事情，那么是的。
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 false
if (exist("address", true)) {
alert("exist");
} else {
alert("not exist");
}
});
});
检查jQuery中是否存在元素并不是所有的答案都是无懈可击的。经过多年的编码，只有此解决方案不会对存在与否发出任何警告：
if($(selector).get(0)) { // Do stuff }
或者在你的职能开始时保释：
if(!$(selector).get(0)) return;
解释
在这种情况下，您不必处理零|空长度问题。这会强制获取一个元素，而不是计算它们。
试试这个。
简单、简短，可在整个项目中使用：
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
}
对于下拉列表：
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
}
默认情况下-否。
长度属性通常以以下方式用于相同的结果：
if ($(selector).length)
在这里，“选择器”将被您感兴趣的实际选择器替换，无论它是否存在。如果它确实存在，那么length属性将输出一个大于0的整数，因此If语句将变为true，从而执行If块。如果没有，它将输出整数“0”，因此If块不会被执行。
我发现这是最jQuery的方式，IMHO。扩展默认函数很简单，可以在全局扩展文件中完成。
$.fn.exist=函数（）{回来此长度；};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=是</div>
有一种奇怪的现象叫做短路调节。没有多少人知道这个功能，所以请允许我解释一下<3.
//you can check if it isnt defined or if its falsy by using OR
console.log( $(selector) || 'this value doesnt exist' )
//or run the selector if its true, and ONLY true
console.log( $(selector) && 'this selector is defined, now lemme do somethin!' )
//sometimes I do the following, and see how similar it is to SWITCH
console.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')
最后一位允许我查看我的类型有什么样的输入，并在列表中运行。如果列表中有一个值，我使用OR（||）运算符跳过并使其无效。这具有与Switch Case相同的性能，并且被认为有点简洁。测试条件的性能和逻辑运算符的使用。
附带说明：对象函数需要重写>.<'但我所做的这个测试是为了研究简洁而富有表现力的条件反射。
资源：逻辑与（带短路评估）
感谢您分享这个问题。首先，有多种方法可以检查它。如果您想检查DOM中是否存在HTML元素。为此，您可以尝试以下方法。
使用Id选择器：在DOM中按Id选择元素，应该提供以前缀（#）开头的Id名称。您必须确保DOM中的每个Html元素都必须具有唯一的id。使用类选择器：可以使用前缀（.）选择属于特定类的所有元素。
现在，如果您想检查元素是否存在于DOM中，可以使用以下代码检查它。
if（$（“#myId”）.length）{//id选择器} if（$（“.myClass”）.length）{//类别选择器}
如果要检查任何变量是否未定义。您可以使用以下代码进行检查。
让x如果（x）console.log（“X”）；其他的console.log（“X未定义”）；
在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扩展jQuery。目前（2022年）的做法是：
jQuery.fn.extend({
exists() { return !!this.length }
});
推荐文章
- 如何在Typescript中解析JSON字符串
- jQuery的“输入”事件
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
