使用jQuery检查是否有任何祖先类

156

是否有jQuery的任何方法来检查，如果任何父，宏伟的父，伟大的盛大父母有一个类。

我有一个标记结构，使我无法在代码中执行以下操作：

$(elem).parent().parent().parent().parent().hasClass('left')

但是，出于代码可读性的考虑，我想避免这种事情。有没有办法说“任何父母/祖父母/曾祖父母有此类”？

我正在使用jQuery 1.7.2。

— 克伦皮科
source

stackoverflow.com/questions/16863917/…-万一有人想在没有jQuery的情况下进行

— 罗伯特·涅斯特罗

Answers:

303

if ($elem.parents('.left').length) {

}

— 亚历克斯
source

谢谢，正是我所需要的！根据记录，虽然.length在JS中将真实值作为处理的做法相当多产，但它更加清晰和易于理解.length > 0

— dooleyo 2015年

这是jQuery .parents（）文档的链接

— H Dog

有许多方法可以过滤元素祖先。

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/}

当心，closest() 检查选择器时方法包括元素本身。

另外，如果您有一个与匹配的唯一选择器$elem，例如#myElem，则可以使用：

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

如果要仅根据样式目的匹配依赖于其祖先类的任何元素，只需使用CSS规则：

.parentClass #myElem { /* CSS property set */ }

— 沃尔夫
source

我可能敢说（未经测试）这种方法更好。Elem.parents将遍历整个父级dom结构，一旦找到具有该元素的最接近的父级，closest（）应该（可能）停止。这是没有根据的猜测。我通常使用closest（）。听起来好像我为自己的博客找到了一个新的研究主题！：P

— dudewad 2014年

@dudewad是的，但这是最近的事情。我的意思是，在较旧的jq版本AFAIK中，情况并非如此。Parents循环在使用mostest（）的第一个匹配的parent上没有中断，但现在已经中断了。（不知道从哪个jq版本开始，但是我很确定此声明是正确的）

— A. Wolff 2014年

很高兴知道，感谢您的信息。很奇怪他们不会从第一个版本中获得突破。

— dudewad 2014年

当找不到父母时，父母（）比最近（）快jsperf.com/closest-vs-parents-foobar

— 亚历克斯

@Alex确实很有趣，请输入！BTW，重新阅读的问题，Is there any way in jQuery to check if any parent,...，closest()检查元素本身所以这是不是真的答题，OP可能希望explecitely排除元素本身，所以你，答案是使用.parents()

— A.沃尔夫

您可以将parentsmethod与指定的.class选择器一起使用，并检查是否有匹配的选择器：

if ($elem.parents('.left').length != 0) {
    //someone has this class
}

— 伊戈尔·迪莫夫（Igor Dymov）
source