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. java String拼接的方法选择及性能分析

    String 拼接的方法选择 在拼接静态字符串时,尽量用 +,因为通常编译器会对此做优化,如: String test = "this " + "is " + ...

  2. 数学 CF1068B LCM

    CF1068B LCM 给定一个正整数\(b (1\leq b \leq 10^{10})\). 把一个正整数a从1枚举到\(10^{18}\),求有多少种不同的\(\large \frac{[a,b ...

  3. QQ第三方登陆示例

    先上图 若想实现QQ登录,需要成为QQ互联的开发者,审核通过才可实现.注册方法可参考链接http://wiki.connect.qq.com/%E6%88%90%E4%B8%BA%E5%BC%80%E ...

  4. [HDU4089]Activation(概率DP)

    HDU4089 题意:有n个人排队等着在官网上激活游戏.Tomato排在第m个. 对于队列中的第一个人.有一下情况: 1.激活失败,留在队列中等待下一次激活(概率为p1) 2.失去连接,出队列,然后排 ...

  5. CDQZ Day3

    模拟题 day3出题人: liu_runda题目名称 摆渡 摆车 背包源程序文件名 boat.cpp ju.cpp pack.cpp输入文件名 boat.in ju.in pack.in输出文件名 b ...

  6. 【Python】子域名查询脚本

    脚本学习,多写写就会啦,来一发个人编写的超级无敌low的子域名查询脚本 #coding:utf-8 import re import requests import urllib import url ...

  7. range() 和 np.arange()区别

    range() 和 np.arange()区别 range(start,stop,step) 三个参数都必须是整数 np.arange()没有此类约束

  8. html5实现判断拍照旋转角度等功能

    https://www.aliyun.com/jiaocheng/857189.html     base64图片编码上传,判断图片是否有旋转,若有旋转修正图片并保存至阿里 http://code.c ...

  9. (转)Linux运维MySQL必会面试题100道

    老男孩教育Linux运维班MySQL必会面试题100道 (1)基础笔试命令考察 (要求:每两个同学一组,一个口头考,一个上机实战作答,每5个题为一组,完成后换位) 1.开启MySQL服务 2.检测端口 ...

  10. 【CSS】CSS Sprites (CSS 精灵) 技术

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...