jquery 判断某个元素在DOM中是否存在

javascript 代码下判断 DOM 下是否存在某个元素

if(document.getElementByIdx_x(‘but’)){
alert(‘元素存在’);
}else{
alert(‘元素不存在’);
}

但是在JQuery 下如判断某个元素是否存在.

jquery 内置没有直接判断dom中某个元素是否存在的方法.

$(“#but”) 获取到的是jquery 对象,是一个object,无法判断此元素是否存在.

但是jquery 对象有个length 属性,表示当前jquery 对象中获取到几个 domElement 元素.

所以我们的jquery代码可以这样写:

if($(“#but”).length>0){
alert(‘元素存在’);
}

只要jquery对象中获取到的 domElement 个数大于0 说明此元素一定存在dom中.

为什么这里不能直接判断对象真假

因为 $("#but") 返回的永远是一个 jQuery 对象，即便它内部没有匹配到任何元素，这个对象本身依然存在。所以直接写：

if ($("#but")) {
  // 这里永远都会进来
}

是没有意义的。真正能说明“有没有匹配到元素”的，是它内部收集到的节点数量，也就是 length。

这个判断在什么场景最常用

像下面这些情况都很典型：

• 某个按钮是否已经渲染出来
• 某个弹层节点是否已经插入 DOM
• 页面某个区域是否存在，再决定后续逻辑是否执行

所以虽然只是一个小技巧，但在早期 jQuery 开发里用得非常频繁。