您當前位置：首頁 > web前端 > jquery > jQuery判斷一個元素是否為另一個元素的子元素(或者其本身)

jQuery判斷一個元素是否為另一個元素的子元素(或者其本身)

來源：程序員人生發布時間：2013-12-24 11:19:57 閱讀次數：3990次

上個月研究學習了《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.jyygyx.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.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 Access 2002的三個實用技巧

下一篇 強大的JavaScript表單驗證插件

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

jQuery判斷一個元素是否為另一個元素的子元素(或者其本身)