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

发布时间：2018-08-27 10:21:38 所属栏目：传媒来源：站长网

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

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

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com]
//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com]
$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

或者：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] $(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.veryhuo.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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

解放家长不再报听写？	运用GPU的强大功能实现
OPPO Find N折叠屏官方	流量论退潮，美妆品牌