使用 jQuery 检查任何祖先是不是有一个类

Posted 2023-03-05

【中文标题】使用 jQuery 检查任何祖先是不是有一个类

【英文标题】：Check if any ancestor has a class using jQuery使用 jQuery 检查任何祖先是否有一个类

【发布时间】：2013-06-09 16:58:07

【问题描述】：

在 jQuery 中有什么方法可以检查 any 父母、祖父母、曾祖父母是否有一个类。

我有一个标记结构，让我在代码中做这种事情：

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

但是，为了代码的可读性，我想避免这种事情。有没有办法说“任何父母/祖父母/曾祖父母都有这个班级”？

我正在使用 jQuery 1.7.2。

【问题讨论】：

***.com/questions/16863917/… - 如果有人想在没有 jQuery 的情况下这样做

【参考方案1】：

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

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 */ 

【讨论】：

我可能会冒昧地说（未经测试）这种方法更好。 Elem.parents 将遍历整个父 dom 结构，其中最接近（）应该（可能）在找到最近的父元素时停止，因此效率更高。这是一个没有根据的猜测。我通常使用最接近（）。听起来我为我的博客找到了一个新的研究主题！ :P

@dudewad 是的，但它是最近的。我的意思是在较旧的 jq 版本中，AFAIK 并非如此。使用最接近（）的第一个匹配父级没有中断父级循环，但现在它是。 （不知道从哪个 jq 版本开始，但我很确定这句话是正确的）

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

没有找到父母时，parents()比closest()快jsperf.com/closest-vs-parents-foobar

@Alex 确实很有趣，谢谢输入！顺便说一句，重新阅读问题，Is there any way in jQuery to check if any parent,...，closest() 检查元素本身，所以这并不是真正回答问题，OP 可能希望明确排除元素本身，所以，答案是使用 .parents()

【参考方案2】：

您可以使用parents 方法和指定的.class 选择器并检查它们是否匹配：

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

【参考方案3】：

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

【讨论】：

谢谢，正是我需要的！记录一下，虽然将.length 视为真值的做法在 JS 中相当多产，但.length > 0 更清晰、更容易理解

这里是 jQuery .parents() 文档的链接