jQuery：如果（目标）是（'.wrapper'）的子元素，则（执行某些操作）。

Question

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

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

有简单的语法吗？有人能向我展示正确的语法吗？

- android.nick

Answer 1

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

- Jacob Relkin

---

请注意，此测试检查目标是否是包装器的直接子元素。 - cherouvim

你应该使用closest而不是parents。 - jantimon

@rahul 0 是一个假值，所以你实际上不需要。 - peirix

+1，因为这帮助我解决了当我检测到长度==0时的“相反”问题。 - klewis

@jantimon 如果目标也有“wrapper”类（“.closest（）”从“target”开始遍历，而不是其父级），那么它就会，除非。 - Trojan

Answer 2

.has() 或许是最方便的语法：

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

在性能方面，更加“强大”的是$.contains()。因此，理想的算法应该如下：

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

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

Reference: .has(), $.contains()

- jAndy

---

+1 是由 jQuery API 明确描述为“检查 DOM 元素是否是另一个 DOM 元素的后代”的 $.contains()。 - gfullam

我不建议按照描述使用 ".has()"，因为它不像你期望的那样返回一个布尔值。相反，它会过滤原始的DOM元素集并返回一个新的jQuery对象。（"描述：将匹配元素集合缩减为那些具有与选择器或DOM元素匹配的后代元素。"）因此，尽管它在这种情况下确实产生了正确的结果，但我认为返回值是不直观的，如果你假设它返回一个布尔值，可能会让你头痛。 - Sean the Bean

Answer 3

这里有一种更整洁的方式：将其绑定为jQuery插件。您可能会发现这样更容易理解和使用。

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

使用方法：

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

- matchdav

Answer 4

对于Jacob的代码做了一小改动，如果子节点深度超过一层，则进行以下修改。

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

- Fordi

Answer 5

你可以像链接中那样使用parent或parents方法

http://jsfiddle.net/6BX9n/

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

- Haim Evgi

Answer 6

我知道这是一篇旧帖子，但它可能对某些人有用。在许多情况下，使用.closest()似乎具有更好的性能：

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

- dmikam

Answer 7

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


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

- srsajid

---

这个答案的背景是什么？看起来像是从某处复制并粘贴的代码。你能否加一些介绍或描述呢？ - Farside

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。- 来自审查 - Michael Parker

Answer 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>

- Arif Billah

Answer 9

你可以使用jQuery的is函数，

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

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

'.wrapper > *' 是一个 CSS 选择器，用于选择 .wrapper 的显式一级子元素。如果您需要任何嵌套的锚点元素，则应改用 '.wrapper *'

- Aurovrata

Answer 10

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

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

- BrunoLM