您当前位置：首页 > web前端 > jquery > jQuery判断一个元素是否为另一个元素的子元素(或者其本身)

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

来源：程序员人生发布时间：2013-12-24 11:19:57 阅读次数：3784次

上个月研究学习了《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);
};

使用起来也非常方便：

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

或者：

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

演示：

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>jQuery判断一个元素是否为另一个元素的子元素的实例页面</title><style type="text/css">.demo {padding: 30px; height: 300px; position: relative; }.floatLayer{ position: absolute; top:50px; left: 100px; width: 200px;height: 200px; border: 10px solid #FF3300; padding: 10px }ol,ul{list-style:none; margin:0; padding:0}.topic-list li{ float:left; margin-right:15px}</style><script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script><script type="text/javascript">//判断:当前元素是否是被筛选元素的子元素jQuery.fn.isChildOf = function(b){return (this.parents(b).length > 0);};//判断:当前元素是否是被筛选元素的子元素或者本身jQuery.fn.isChildAndSelfOf = function(b){return (this.closest(b).length > 0);};</script></head><body><div id="main"><h1>jQuery判断一个元素是否为另一个元素的子元素的实例页面</h1><div id="body" class="light"><div id="content" class="show"><h3>演示</h3><div class="article_new"><a href="http://www.wfuyu.com/a/view/36598.html">回到相关文章 >></a></div><div class="demo"><div class="floatLayer"><h4>这是一个浮层</h4> 点击浮层内部警告true<br />点击浮层外部警告false</div></div><h3>代码</h3><div class="demo"><h5>JS代码：</h5><pre name="code" class="js">//判断:当前元素是否是被筛选元素的子元素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).isChildAndSelfOf(".floatLayer"));});</pre></div></div></div></div><script type="text/javascript">DlHighlight.HELPERS.highlightByName("code", "pre");//<pre>标签添加属性name="code"以及class="LANG" (LANG可以是"js", "css", "xml" and "html")</script><script type="text/javascript">$(document).click(function(event){alert($(event.target).isChildAndSelfOf(".floatLayer"));});</script></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Access 2002的三个实用技巧

下一篇 强大的JavaScript表单验证插件

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点