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,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

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

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

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

  5. CSS子元素居中(父元素宽高已知,子元素未知)

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

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

    父元素使用 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高度自适应(父元素未知,所有高度跟随子元素最大的高度)

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

随机推荐

  1. P4175 [CTSC2008]网络管理 树剖+树套树

    $ \color{#0066ff}{ 题目描述 }$ M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通 ...

  2. 海思3519A上移植OpenCV3.x

    环境安装与准备 下载opencv3.4.1. 或者 下载opencv3.2.0. 进入到opencv所在的目录新建目录build,install 安装cmake: apt-get install cm ...

  3. java FastJSON的使用

    1.JSON介绍 JSON(javaScript Object Notation)是一种轻量级的数据交换格式.主要采用键值对({"name": "json"}) ...

  4. 记新人从 excel 文件中读取字典数据踩的一个坑

    原本是打算今天分享一下最近学习接口自动化的心得体会,然而在我写模板的时候,却被一个坑拦我大半天,心得体会不得不 延期再分享了.在我无数次调试无数次看log,终于发现并解决这个问题了.下面记录一下踩的坑 ...

  5. Jenkins 发布平台 MSB4064: The "Retries" parameter is not supported & error MSB4063: The "Copy" task could not be initialized

    ____________________________________________________________________________________________________ ...

  6. 换个角度看Salesforce之基础配置学习笔记(二)

    1. 登录后无法使用Developer Console? 先找到当前登录用户的Profie,然后勾选Profile中的View All Data(Modify All Data)即可: 2. Pers ...

  7. python+selenium的搭建过程

    搭建步骤 1.第一步没啥好说的,肯定是先安装python 下载地址:http://download.csdn.net/detail/intel80586/4297269 全部默认安装即可. 安装完毕后 ...

  8. c#异步编程async await

    可以代替协程了 但是需要.net4 版本 unity2017以上版本可以用了 再也可以不用蛋疼的没有返回值的协程了 //异步编程,和Task一起用 async void TestAsync(){ // ...

  9. unity状态机实现

    刚看了浅墨大神的文章让我对状态机有了进一步的理解 具体实现见装载的状态机文章 首先得有个总状态HeroineBaseState接口,其里面的方法主要是与行为相关的方法,让继承此接口的类来实现的 具体的 ...

  10. Mybatis 关联查询(三)

    多对多的管理查询结果映射   1. 需求: 查询用户购买的商品信息   2. 分析: (1)用户和商品没有直接关联 (2)用户和订单进行了关联,订单和订单明细进行了关联,订单明细和商品进行了关联,因此 ...