javascript判断一个元素是另外一个元素的子元素

时间:2021-07-30 16:04:47

javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等。

function isParent (obj,parentObj){
while (obj != undefined && obj != null && obj.tagName.toUpperCase() != ‘BODY’){
if (obj == parentObj){
return true;
}
obj = obj.parentNode;
}
return false;
} $(document).click(function(event){
alert(isParent(event.target, $(“.floatLayer”)[0]));
});

感觉还挺好用,但是在jQuery应用中还是有很多缺陷,比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展:

jquery代码
//判断:当前元素是否是被筛选元素的子元素

jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};

//判断:当前元素是否是被筛选元素的子元素或者本身

jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便:

$(document).click(function(event){
alert($(event.target).isChildOf(“.floatLayer”));
});
或者
$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (“.floatLayer”));
});

javascript判断一个元素是另外一个元素的子元素的更多相关文章

  1. js将数组中一个或多个字段相同的子元素中合并

    最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...

  2. 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  3. 解决IE6&comma;IE7下子元素使用position&colon;relative、父元素使用overflow&colon;auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  4. 解决 border-radius 元素在应用了 transform 的子元素 时overflow&colon;hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  5. CSS子元素居中&lpar;父元素宽高已知,子元素未知&rpar;

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  6. 在css中 父元素不固定高度,怎样实现子元素的高度100&percnt;

    父元素使用 position: relative; 子元素使用 position: absolute; height: 100%;

  7. 改变父元素的透明度,不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  8. div鼠标悬停,子元素上移,鼠标移出,子元素下移动画。

    HTML: <div class="edt_title" > <div id="edt_title"> <p class=&quo ...

  9. 父元素设置overflow,绝对定位的子元素会被隐藏或一起滚动

    一般情况: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  10. div高度自适应&lpar;父元素未知,所有高度跟随子元素最大的高度&rpar;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. React Native &plus; Nodejs 使用RSA加密登录

    想用rn做个RSA(非对称加密)登录 基本流程就是在服务端生成RSA后,将“公钥”发到客户端,然后客户端用“公钥”加密信息发送到服务端,服务务端用私钥解密. 过程不复杂,问题在于,nodejs和rn都 ...

  2. Atitit ACID解决方案2PC&lpar;两阶段提交&rpar;&&num;160&semi;&&num;160&semi;跨越多个数据库实例的ACID保证

    Atitit ACID解决方案2PC(两阶段提交)  跨越多个数据库实例的ACID保证 1.1. ACID解决方案1 1.2. 数据库厂商在很久以前就认识到数据库分区的必要性,并引入了一种称为2PC( ...

  3. JXLS 双循环模板

    商户名称 门店代码 时间 金额 <jx:forEach items="${resultList}" var="l">       ${l.name} ...

  4. Hashtable与ConcurrentHashMap区别

    Hashtable与ConcurrentHashMap区别 ConcurrentHashMap融合了hashtable和hashmap二者的优势. hashtable是做了同步的,是线性安全的,(2) ...

  5. Ubuntu 14&period;04 安装flash插件

    分别tar.gz和apt-get方法 第一种: adboe官网下载tar.gz,进入terminal 1.解压缩包,输入命令“tar -zxvf 软件包名字” 2.拷贝插件到mozilla目录,输入命 ...

  6. LayoutInflater的获取与使用

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  7. Java DB 访问之 mybatis mapper xml 配置方式

    1 项目说明 项目采用 maven 组织 ,jdbc 唯一的依赖就是 mysql-connector-java pom 依赖如下: mysql 数据连接 : mysql-connector-java ...

  8. Visual Studio Code扩展:

    Auto Close TagAuto Rename TagBeautifyChinese (Simplified) Language Pack for Visual Studio CodeClass ...

  9. jQuery 选择器demo练习

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  10. Git忽略规则&period;gitignore忽略node&lowbar;modules文件夹

    在项目文件夹里添加.gitignore的文件 打开文件,在里面添加 /node_modules