如何测试HTML元素的祖先是否有CSS类

How can I test if an ancestor of my HTML element has a CSS class?

本文关键字：祖先 是否 CSS 元素 HTML 何测试 测试      更新时间：2023-09-26

给定这样的HTML代码-

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

如何编写测试来查看child元素是否应用了类foo？我试过了：

element
.children("#child") //successfully selects child
.hasClass("foo");   //false :(

CSS类不会像这样涓涓细流，但您仍然可以检查祖先是否有这样的类：

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

这可能是因为您的#child没有foo类。parent有它，对吧？！

PS。大卫，你今天似乎受够了：）

CSS类不能以这种方式工作。它们只适用于应用它们的元素，不应该像那样明确地影响子元素。

CSS和jQuery都无法做到这一点。一个建议是使用closest。

$(function(){
  var element = $('#parent').children('#child');
  if (element.closest('.foo').length > 0) {
    //you will get true for .foo, #child, or #parent, or div, ...
    console.log('Yay!');
  } else {
    console.log('Duh!');
  }
});

打印"耶！"。

该方法将检查元素或祖先是否具有所需的类。你可以要求一个类或ID。如果你想检查隐藏的元素，正如你所说的，你可以在常规的is调用中尝试:hidden伪选择器，而不是hasClass（Fiddle Here）：

<div id="parent" class="foo" style='display: none'>
  <div id="child">
  </div>
</div>
$(function(){
  var element = $('#parent').children('#child');
  if (element.is(':hidden')) {
    console.log('Yay!');
  } else {
    console.log('Duh!');
  }
});

打印"耶！"。

另一个是，考虑到您当前的DOM（Fiddle Here）：

$(function(){
  var element = $('#parent').children('#child');
  if (element.is('.foo *')) {
    console.log('Yay!');
  } else {
    console.log('Duh!');
  }
});

打印"耶！"。

然而，您使用的是ng-hide，它通常意味着AngularJS。不知道你的意图是什么，但如果你不是在创建自定义指令，请避免使用jquery并重新思考你的问题。

使用.children()时，选择器已移动到另一个DOM节点。要遍历回父对象，只需使用.end()，即：

element
.children("#child")//successfully selects child
.end()//moves cursor back the parent element
.hasClass("foo");//true :)

使用jQuery

如何使用jQuery检查元素的任何祖先是否具有名为foo:的类

$element.parents('.foo').length > 0

Demo

var $element = $('#child');
alert(
    $element.parents('.foo').length > 0
);
alert(
    $element.parents('.bar').length > 0
);
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div id="parent" class="foo">
    <div id="child">
    </div>
</div>

（另请参见此Fiddle）

没有jQuery

如何在没有jQuery的情况下检查元素的任何祖先是否具有名为foo:的类

element.matches('.foo ' + element.tagName)

Demo

var element = document.getElementById('child');
alert(
    element.matches('.foo ' + element.tagName)
);
alert(
    element.matches('.bar ' + element.tagName)
);
<div id="parent" class="foo">
    <div id="child">
    </div>
</div>

（另请参见此Fiddle）

相关文章：