jQuery判定一个元素是否为另一个元素的子元素(可能其自己)

发布时间：2018-08-25 22:39:40 所属栏目：业界来源：站长网

导读：上个月研究进修了《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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

宏光MINI GAMEBOY全面	美国初创公司Aquarian
新一代汽车芯片的设计	显示器常见背光种类盘