如何检查jQuery中是否存在元素？
我目前的代码是：
if ($(selector).length > 0) {
// Do something
}
有更优雅的方式来解决这个问题吗？也许是插件或功能？
答案 0 :(得分：2296)
在JavaScript中，一切都是“真实的”或“虚假的”，对于数字0（和NaN）意味着false，其他一切都是true。所以你可以写：
if ($(selector).length)
您不需要>0部分。
答案 1 :(得分：1315)
是！
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
答案 2 :(得分：356)
如果您使用
jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }
你会暗示链接是可能的，但事实并非如此。
这会更好：
jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }
或者，from the FAQ：
if ( $('#myDiv').length ) { /* Do something */ }
您还可以使用以下内容。如果jQuery对象数组中没有值，那么获取数组中的第一个项将返回undefined。
if ( $('#myDiv')[0] ) { /* Do something */ }
答案 3 :(得分：127)
您可以使用：
// if element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }
答案 4 :(得分：90)
检查存在的最快且最具语义自我解释的方法实际上是使用普通JavaScript：
if (document.getElementById('element_id')) {
// Do something
}
写入比jQuery长度替换要长一些，但执行得更快，因为它是本机JS方法。
它比编写自己的jQuery函数更好。由于@snover说的原因，这种替代方案较慢。但它也会给其他程序员一种印象，即exists()函数是jQuery固有的东西。编辑代码的其他人会/应该理解JavaScript，而不会增加知识债务。
NB：请注意element_id之前缺少'＃'（因为这是普通的JS，而不是jQuery）。
答案 5 :(得分：64)
您可以通过以下方式保存几个字节：
if ($(selector)[0]) { ... }
这是有效的，因为每个jQuery对象也伪装成一个数组，因此我们可以使用数组解除引用运算符来获取数组中的第一个项目。如果指定索引处没有项目，则返回undefined。
答案 6 :(得分：58)
您可以使用：
if ($(selector).is('*')) {
// Do something
}
小也许更优雅。
答案 7 :(得分：58)
此插件可用于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);
您可以指定一个或两个回调。如果元素存在，则第一个将触发，如果元素不，则第二个将触发。但是，如果您选择仅传递一个函数，则只会在元素存在时触发。因此，如果所选元素不存在，则链将死亡。当然，如果确实存在，第一个函数将触发，链将继续。
请记住，使用回调变体有助于保持可链接性 - 返回元素，您可以像使用任何其他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 */
}
})
答案 8 :(得分：54)
我认为这里的大部分答案都是不准确，因为它们应该是，它们检查元素长度，在很多情况下它可以 OK ，但不是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
答案 9 :(得分：52)
真的不需要jQuery。使用纯JavaScript，检查以下内容更容易，语义更正确：
if(document.getElementById("myElement")) {
//Do something...
}
如果由于某种原因您不想为该元素添加id，您仍然可以使用任何其他用于访问DOM的JavaScript方法。
jQuery真的很酷，但不要让纯粹的JavaScript被遗忘......
答案 10 :(得分：48)
你可以用这个：
jQuery.fn.extend({
exists: function() { return this.length }
});
if($(selector).exists()){/*do something*/}
答案 11 :(得分：41)
之前所有答案都需要.length参数的原因是它们主要使用jquery的$()选择器，它在幕后有查询选择器（或者它们直接使用它）。这个方法相当慢，因为它需要解析整个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;
如果你实际上并不需要这个元素并希望获得/存储一个真/假，那就加倍吧！它适用于解开的鞋子，为什么要在这里打结？
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);
答案 12 :(得分：36)
我发现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
答案 13 :(得分：36)
$.contains()你想要的是什么吗？
jQuery.contains( container, contained )如果第二个参数提供的DOM元素是第一个参数提供的DOM元素的后代，
$.contains()方法返回true，无论它是直接子节点还是嵌套更深。否则，它返回false。仅支持元素节点;如果第二个参数是文本或注释节点，$.contains()将返回false。注意 ：第一个参数必须是DOM元素，而不是jQuery对象或纯JavaScript对象。
答案 14 :(得分：34)
您可以在java脚本中使用length检查元素是否存在。 如果长度大于零，那么如果长度为零则存在元素 元素不存在
// 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
}
答案 15 :(得分：31)
Checking for existence of an element在jQuery官方网站上得到了很好的记录！
使用您返回的jQuery集合的.length属性 选择器：
if ($("#myDiv").length) { $("#myDiv").show(); }请注意，测试元素是否存在并不总是必要的。 以下代码将显示元素是否存在，并且不执行任何操作 （如果没有错误），如果不是：
$("#myDiv").show();
答案 16 :(得分：28)
这与所有答案非常相似，但为什么不两次使用!运算符，以便获得布尔值：
jQuery.fn.exists = function(){return !!this.length};
if ($(selector).exists()) {
// the element exists, now what?...
}
答案 17 :(得分：27)
$(selector).length && //Do something
答案 18 :(得分：26)
尝试测试DOM元素
if (!!$(selector)[0]) // do stuff
答案 19 :(得分：25)
受到hiway's answer的启发，我想出了以下内容：
$.fn.exists = function() {
return $.contains( document.documentElement, this[0] );
}
jQuery.contains接受两个DOM元素并检查第一个元素是否包含第二个元素。
使用document.documentElement作为第一个参数时，我们只想应用它来检查当前文档中是否存在元素时，就会实现exists方法的语义。
下面，我整理了一个代码段，将jQuery.exists()与$(sel)[0]和$(sel).length方法进行比较，这些方法都返回truthy $(4)个值而$(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>
答案 20 :(得分：24)
我只想使用普通的香草javascript来做这件事。
function isExists(selector){
return document.querySelectorAll(selector).length>0;
}
答案 21 :(得分：23)
不需要jQuery
if(document.querySelector('.a-class')) {
// do something
}
答案 22 :(得分：21)
我偶然发现了这个问题，我想分享一下我目前使用的一段代码：
$.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
答案 23 :(得分：18)
我有一个案例，我想看看对象是否存在于另一个对象中，所以我在第一个答案中添加了一些内容来检查选择器内的选择器..
// 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;
};
答案 24 :(得分：17)
怎么样：
function exists(selector) {
return $(selector).length;
}
if (exists(selector)) {
// do something
}
这是非常小的，并且每次都需要用$()封装选择器。
答案 25 :(得分：14)
我正在使用它：
$.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/
答案 26 :(得分：13)
这是我在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
}
);
答案 27 :(得分：13)
$("selector"）返回一个具有length属性的对象。如果选择器找到任何元素，它们将包含在对象中。因此，如果检查其长度，您可以查看是否存在任何元素。在JavaScript 0 == false中，如果您没有0，您的代码就会运行。
if($("selector").length){
//code in the case
}
答案 28 :(得分：10)
您不必检查它是否大于0，如$(selector).length > 0，$(selector).length它是否足够且优雅的方式来检查元素的存在。如果你想做更多额外的事情，我不认为只为此写一个函数是值得的，是的。
if($(selector).length){
// true if length is not 0
} else {
// false if length is 0
}
答案 29 :(得分：10)
以下是不同情况的完整示例以及检查元素是否存在的方法如果在jQuery选择器上使用direct可能会或可能不会，因为它返回数组或元素。
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
答案 30 :(得分：9)
if ( $('#myDiv').size() > 0 ) { //do something }
size()计算选择器返回的元素数量
答案 31 :(得分：9)
是这样做的最佳方法：
按string b = client.GetPromotionalTopDeal_TOUR("TCTZ00021"); // this gives the json string
：
RootobjectOne one = JsonConvert.DeserializeObject<RootobjectOne>(b);
JQuery可以是if($("selector").length){
//code in the case
}
selector或Element ID
OR
如果您不想使用Element库，则可以使用Core Class实现此目的：
按jQuery：
JavaScript答案 32 :(得分：6)
尝试一下。
简单，短和在整个项目中可用：
jQuery.fn.exists=function(){return !!this[0];}; //jQuery Plugin
用法：
console.log($("element-selector").exists());
_________________________________
甚至更小的： （用于何时，您不想定义jQuery插件）：
if(!!$("elem-selector")[0]) ...;
甚至
if($("elem-selector")[0]) ...;
答案 33 :(得分：4)
id和类选择器的简单实用程序函数。
function exist(IdOrClassName, IsId) {
var elementExit = false;
if (IsId) {
elementExit= $("#" + "" + IdOrClassName + "").length ? true : false;
}
else {
elementExit = $("." + "" + IdOrClassName + "").length ? true : false;
}
return elementExit;
}
将此功能称为bellow
$(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");
}
});
});
答案 34 :(得分：3)
所有答案不正在运行防弹以检查jQuery中是否存在元素。经过多年的编码，只有这个解决方案不会抛出任何关于存在的警告：
if($(selector).get(0)) { // Do stuff }
或者在你的职能开始时保释：
if(!$(selector).get(0)) return;
<强>解释
在这种情况下，你不必处理零|空长问题。这会强制获取一个元素，而不是计算它们。
答案 35 :(得分：3)
只需检查选择器的长度，如果选择器的长度大于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
}
答案 36 :(得分：2)
我正在使用这个：
if($("#element").length > 0){
//the element exists in the page, you can do the rest....
}
找到元素非常简单容易。
答案 37 :(得分：0)
使用jQuery，您不需要>0，这就是您所需要的：
if ($(selector).length)
使用香草JS，您可以执行以下操作：
if(document.querySelector(selector))
如果要将其转换为返回bool的函数：
const exists = selector => !!document.querySelector(selector);
if(exists(selector)){
// some code
}
答案 38 :(得分：0)
if($(selector).length){...
对于那些被误解为我们将.length用作JavaScript内置函数的人
我们未使用JAVASCRIPT内置功能.length
假设我取了一个length = 2的数组
var arr= ["",""];
我正在尝试删除length中的arr
var arr= ["",""];
console.log(arr.length);
delete arr.length;
console.log(arr.length);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
从上面的片段中，否，我无法删除数组length
关于jQuery $(selector)
我有两个具有class = "demo"的div元素：
var obj = $(".demo");
console.log(obj.length);
delete obj.length;
console.log(obj.length);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo"></div>
<div class="demo"></div>
从上述代码段的输出中，我删除了length的{{1}}
我们没有使用内置的JavaScript $()函数
.length只是对象length中的 KEY ：
$(selector)答案 39 :(得分：0)
默认-否
通常通过以下方式使用length属性获得相同的结果：
if ($(selector).length)
在这里，“选择器”将由您感兴趣的实际选择器替换，如果它不存在。如果确实存在，则length属性将输出大于0的整数，因此if语句将变为true，并因此执行if块。如果没有，它将输出整数“ 0”，因此if块将不会执行。
答案 40 :(得分：0)
我发现这是最 jQuery的方式，恕我直言。 扩展默认功能很容易，并且可以在全局扩展文件中完成。
$.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>
答案 41 :(得分：0)
有一种奇怪的现象，称为短路调节。没有多少人知道这个功能，所以让我解释一下！ <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')
最后一位允许我查看我的 typeof 有什么样的输入，并在该列表中运行。如果我的列表之外有值，我会使用 OR (||) 运算符跳过并取消。这与 Switch Case 具有相同的性能，并且被认为有些简洁。 Test Performance of the conditionals and uses of logical operators。
旁注：对象函数有点需要重写>。<'但是我构建的这个测试是为了研究简洁和富有表现力的条件。
答案 42 :(得分：-1)
如果输入不存在，则该输入将没有值。试试这个...
if($(selector).val())
答案 43 :(得分：-2)
使用以下语法使用jQuery检查元素是否实际存在。
let oElement = $(".myElementClass");
if(oElement[0]) {
// Do some jQuery operation here using oElement
}
else {
// Unable to fetch the object
}
答案 44 :(得分：-3)
将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');
}