jQuery使用jQuery对象查找祖先元素

Question

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

var someDiv = $('#div');

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

我想确认一个元素是否是另一个元素的子元素，如果可能的话，我希望避免回到DOM操作。

- MichaelThompson

Answer 1

您可以使用index()方法检查列表中是否存在元素，因此以下内容是否有效？

var someDiv = $('#div');

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

来自#index reference。

- Gareth

---

完美的，Gareth，谢谢你！我想给你点赞，但是我的微薄的11个声望值不允许我这样做。 - MichaelThompson

Answer 2

如@Gareth建议的那样，检查(this).parents().index(someDiv) >= 0将完美地工作。

然而，使用jQuery ancestry插件会更快/更有效率。

- Már Örlygsson

---

谢谢！祖先插件和DOM方法速度要快得多。 - MichaelThompson

Answer 3

在这些方面，parents() 可选地接受一个选择器本身：

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

- Dave Ward

---

.parents() 只接受最基本的选择器（即只有描述单个元素的选择器有效 - 不包括描述祖先关系的选择器，如“p strong”）。 - Már Örlygsson

我简化了一下示例，所以在实际代码中，我使用存储的jQuery引用来获取父对象，而不是字符串选择器。 - MichaelThompson

Answer 4

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

- Jonas Fischer

Answer 5

一种方法是使用过滤函数。

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

我认为你也可以尝试使用jQuery.inArray

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

- John C

Answer 6

仅使用CSS选择器无法获得您想要的结果吗？

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

- Pistos

Answer 7

试试这个：

var someDiv = $('#div');

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

- Pier Luigi