如何检查jQuery中元素的存在?
我现在的代码是:
if ($(selector).length > 0) {
// Do something
}
有没有更优雅的方式来处理这个问题?也许是插件或函数?
如何检查jQuery中元素的存在?
我现在的代码是:
if ($(selector).length > 0) {
// Do something
}
有没有更优雅的方式来处理这个问题?也许是插件或函数?
当前回答
前面的所有答案都需要.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);
其他回答
我发现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
您可以通过以下方式节省几个字节:
if ($(selector)[0]) { ... }
这是因为每个jQuery对象也伪装成一个数组,所以我们可以使用数组解引用运算符从数组中获取第一个项。如果指定索引中没有项,则返回undefined。
是的最佳方法:
通过JQuery:
if($("selector").length){
//code in the case
}
选择器可以是元素ID或元素类
OR
如果您不想使用jQuery Library,那么可以通过使用Core JavaScript实现这一点:
通过JavaScript:
if(document.getElementById("ElementID")) {
//Do something...
}
if ( $('#myDiv').size() > 0 ) { //do something }
size()统计选择器返回的元素数
以下是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
}
);