使用 jQuery 对象的 jQuery 祖先答案

【问题标题】：jQuery ancestors using jQuery objects使用 jQuery 对象的 jQuery 祖先
【发布时间】：2008-10-28 23:18:52
【问题描述】：

我想使用两个 jQuery 对象来检查祖先。它们没有 ID，只能作为 jQuery 对象（或 DOM 节点，如果您调用 get()）。 jQuery 的 is() 仅适用于表达式，因此此代码将是理想的但不会工作：

var someDiv = $('#div');

$('a').click(function() {
    if ($(this).parents().is(someDiv)) {
        alert('boo');
    }
}

只是想看看一个元素是否是另一个元素的子元素，如果可能的话，我想避免回到 DOM 领域。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用 index() 方法来检查一个元素是否存在于列表中，那么下面的工作是否可行？

var someDiv = $('#div');

$('a').click(function() {
    if ($(this).parents().index(someDiv) >= 0) {
        alert('boo');
    }
}

来自#index reference。

【讨论】：

完美的加雷斯，谢谢！我会投票给你，但我只有 11 分的声誉分数让我无法这样做。

【解决方案2】：

正如@Gareth 建议的那样，检查(this).parents().index(someDiv) >= 0 会正常工作。

但是，使用jQuery ancestry plugin更快/更高效。

【讨论】：

谢谢！祖先插件和 DOM 方法要快得多。

【解决方案3】：

按照这些思路，parents() 可以选择接受选择器本身：

$('a').click(function() {
  if ($(this).parents("#div").length) {
    alert('boo');
  }
});

【讨论】：

.parents() 只接受最基本的选择器（即，只有描述单个元素的选择器才能工作 - 而不是描述祖先的选择器，例如“p strong”）。
我稍微简化了我的示例，因此在实际代码中，我使用存储的 jQuery 引用而不是字符串选择器来获取父对象。

【解决方案4】：

一种方法是使用过滤功能

$('a').click(function() {
    $(this).parents().filter(function() {
       return this == someDiv[0];
    }).each(function() {
       alert('foo');
    })
}

我认为您也可以使用 jQuery.inArray 摆脱困境

if ($.inArray( someDiv, $(this).parents() ) ) {
        alert('boo');
}

【讨论】：

【解决方案5】：

如果仅仅使用 CSS 选择器，你会不会得到你想要的结果？

$( '#div a' ).click( function() { ... } );

【讨论】：

【解决方案6】：

试试这个：

var someDiv = $('#div');

$('a').click(function() {
    if ($.inArray($(this).parents().get(), someDiv.get(0)) {
        alert('boo');
    }
}

【讨论】：

【解决方案7】：

var $element = $('a');
while ($element && !$element.is('someDiv')) {
   var $element = $element.parent();
};

【讨论】：