jquery: if (target) is child of ('.wrapper') then (do something)答案

【问题标题】：jquery: if (target) is child of ('.wrapper') then (do something)jquery: if (target) is child of ('.wrapper') then (do something)
【发布时间】：2010-10-18 06:37:01
【问题描述】：

var target = $(this).attr("href");

if {target is child of ('.wrapper')} then (do something)

语法简单？有人可以在这里告诉我正确的语法吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

if($(target).parents('.wrapper').length > 0) {
   //do something...
}

【讨论】：

小修改而不是 $(target) 使用 $(this) 作为目标包含字符串。
请注意，此测试目标是包装器的直接子级。
@Chinmayee，href 指向 OP 要检查的元素的实际 id，而不是 this。
你应该使用最接近的而不是父母。
@rahul 0 是一个假值，所以你真的不需要。

【解决方案2】：

.has() 可能是最方便的语法：

if( $('.wrapper').has($(target)) ) {
     // do something
}

更“强大”（就性能而言）是$.contains()。所以一个理想的算法应该是这样的：

var $wrapper =  $('.wrapper'),
    $target  =  $(this).attr('href');

if( $.contains($wrapper[0], $target[0]) ) {
    // do something
}

参考：.has()，$.contains()

【讨论】：

+1 for $.contains() 被 jQuery API 明确描述为“检查一个 DOM 元素是否是另一个 DOM 元素的后代。”
我不推荐使用.has()，因为它不会像您期望的那样返回布尔值。相反，它过滤原始的 DOM 元素集并返回一个新的 jQuery 对象。（“描述：将匹配元素的集合减少为具有与选择器或 DOM 元素匹配的后代的元素。”）因此，尽管在这种情况下它确实产生了正确的结果，但我认为返回值不直观，如果您假设它返回布尔值，可能会让您头疼。

【解决方案3】：

这是一种更简洁的方式：将其绑定为 jQuery 插件。您可能会发现它更易于理解和使用。

   $.fn.isChildOf = function(element)
{
    return $(element).has(this).length > 0;
}

用法：

    if ( $('.target').isChildOf('.wrapper') ) {
      //do all the things.
    }

【讨论】：

【解决方案4】：

如果孩子的深度超过一级，则对 Jacob 的代码进行少量更改。

if($(target).parents('.wrapper').length) {
   //do something...
}

【讨论】：

【解决方案5】：

您可以使用链接中的parent 或parents 方法

http://jsfiddle.net/6BX9n/

http://jsfiddle.net/6BX9n/1/

【讨论】：

【解决方案6】：

我知道这是旧帖子，但它可能对某人有用。在我看来，在许多情况下使用 .closest() 会有更好的性能：

if ($(target).closest('.wrapper').length){
    // your code here
}

【讨论】：

【解决方案7】：

<div class="parent">
    <div class="child">
    </div>
 </div>


$(".child").is(".parent .child")

【讨论】：

这个答案的上下文是什么，它看起来像是从某个地方复制和粘贴的代码。您可以通过一些介绍或描述来扩展它吗？
虽然此代码可以回答问题，但提供有关如何和/或 为什么 解决问题的附加上下文将改善答案的长期价值。 - From Review

【解决方案8】：

您可以使用 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>

【讨论】：

【解决方案9】：

你不能绑定另一个事件吗？

$('.wrapper *').click(function() {
    // will execute on childrens of .wrapper
});

【讨论】：

【解决方案10】：

你可以使用jQuery的is函数，

var target = $(this).attr("href");

if ($('a[href="'+target+'"]').is(('.wrapper > *') {
  //do soemthing
}

'.wrapper > *' 是 .wrapper 的显式第一级子级的 css 选择。如果您需要任何嵌套的锚元素，请改用'.wrapper *'

【讨论】：