如何检查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 element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }
我发现这是最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>
在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");
}
Yes!
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
这是对杰夫·阿特伍德主持的《放牧守则》播客的回应
感谢您分享这个问题。首先,有多种方法可以检查它。如果您想检查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未定义”);