jQuery判断一个元素是否为另一个元素的子元素(或者其本身)

WEB前端开发 2011-07-12 13:32:45 累计浏览 2,739 次

本机暂存

标签 DOM JavaScript jQuery

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

//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

1
//判断:当前元素是否是被筛选元素的子元素 

2
jQuery.fn.isChildOf = function(b){ 

3
return (this.parents(b).length > 0); 

4
}; 

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

6
jQuery.fn.isChildAndSelfOf = function(b){ 

7
return (this.closest(b).length > 0); 

8
};

使用起来也非常方便：

$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

1
$(document).click(function(event){ 

2
alert($(event.target).isChildOf(".floatLayer")); 

3
});

或者：

$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (".floatLayer"));
});

1
$(document).click(function(event){ 

2
alert($(event.target).isChildAndSelfOf (".floatLayer")); 

3
});

查看demo：http://www.css88.com/demo/isParent/index1.html

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

JQuery实现Excel表格呈现（累计阅读 48,350）
深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,406）
从输入 URL 到页面加载完成的过程中都发生了什么事情？（累计阅读 15,934）
图片动态局部毛玻璃模糊效果的实现（累计阅读 14,849）
天朝第二代身份证号码的验证机制（累计阅读 14,764）
HTML 5 的data-* 自定义属性（累计阅读 14,349）
分享一个JQUERY颜色选择插件（累计阅读 14,225）
什么是全栈工程师？（累计阅读 14,040）
快速排序（Quicksort）的Javascript实现（累计阅读 11,735）
7 天打造前端性能监控系统（累计阅读 11,190）