Javascript jquery: 如果 (target) 是 ('.wrapper') then (do something)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3957017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: if (target) is child of ('.wrapper') then (do something)
提问by android.nick
var target = $(this).attr("href");
if {target is child of ('.wrapper')} then (do something)
simple syntax? can someone show me the correct syntax here?
简单的语法？有人可以在这里告诉我正确的语法吗？
回答by Jacob Relkin
if($(target).parents('.wrapper').length > 0) {
//do something...
}
回答by jAndy
.has()is maybe the mose convenient syntax:
.has()也许是最方便的语法：
if( $('.wrapper').has($(target)) ) {
// do something
}
Even more 'powerful' (in terms of performance) is $.contains(). So an ideal algorithm should look like:
更“强大”（在性能方面）是$.contains(). 所以一个理想的算法应该是这样的：
var $wrapper = $('.wrapper'),
$target = $(this).attr('href');
if( $.contains($wrapper[0], $target[0]) ) {
// do something
}
Reference: .has(), $.contains()
参考：.has(), $.contains()
回答by matchdav
Here's a tidier way: bind it as a jQuery plugin. You might find it be easier to understand and use.
这是一种更简洁的方法：将其绑定为 jQuery 插件。您可能会发现它更易于理解和使用。
$.fn.isChildOf = function(element)
{
return $(element).has(this).length > 0;
}
Usage:
用法：
if ( $('.target').isChildOf('.wrapper') ) {
//do all the things.
}
回答by Fordi
Small change to Jacob's code, if the child is deeper than one level in.
如果孩子比一个级别更深，则对 Jacob 的代码进行小改动。
if($(target).parents('.wrapper').length) {
//do something...
}
回答by srsajid
<div class="parent">
<div class="child">
</div>
</div>
$(".child").is(".parent .child")
回答by Arif Billah
You can use jQuery's .find()method for this like below:
您可以使用 jQuery 的.find()方法，如下所示：
if ( $( '.wrapper' ).find( $( e.target ) ).length > 0 ) {
// target is a child of $( '.wrapper' )
}
$( document ).on('click', function ( e ) {
if ( $( '.wrapper' ).find( $( e.target ) ).length > 0 ) {
// do staff here, target's inside $( '.wrapper' )
alert( 'target is a child of .wrapper' );
} else {
alert( 'target is not a child of .wrapper' );
}
} );.wrapper {
width: 200px;
height: 200px;
background: black;
display: flex;
}
.wrapper:before {
content: '.wrapper';
color: #FFF;
position: absolute;
}
.child {
width: 80px;
height: 80px;
background: red;
margin: auto;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="child">.child</div>
</div>回答by BrunoLM
Can't you bind another event?
你不能绑定另一个事件吗？
$('.wrapper *').click(function() {
// will execute on childrens of .wrapper
});
回答by dmikam
I know this is old post, but it could be useful for someone. It seems to me that in many cases using .closest() would have better performance:
我知道这是旧帖子，但它可能对某人有用。在我看来，在许多情况下使用 .closest() 会有更好的性能：
if ($(target).closest('.wrapper').length){
// your code here
}
