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

Question

给出像这样的HTML代码 -

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

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

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

Answer 1

CSS类不会像这样流下来，但你仍然可以检查一个祖先是否有这样的类：

Check if any ancestor has a class using jQuery

Answer 2

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

PS。大卫，看起来你今天已经受够了：）

Answer 3

CSS课程不会那样工作。它们仅适用于应用它们的元素，不应该明显地影响孩子。

Answer 4

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!');
  }
});

打印'耶！'。

该方法将检查元素或祖先是否具有您需要的类。您可以要求上课或身份证。如果你想检查隐藏的 - 你所说的 - 元素，你可以在常规:hidden调用中尝试is伪选择，而不是hasClass（Fiddle Here）：< / p>

<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并重新考虑你的问题。

Answer 5

使用jQuery

如果元素的任何祖先有一个名为foo的类，如何检查jQuery：

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

演示

＆＃13;

＆＃13;

var $element = $('#child');

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

alert(
    $element.parents('.bar').length > 0
);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）

没有jQuery

如果元素的任何祖先有一个名为foo的类，如何在没有jQuery的情况下进行检查：

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

演示

＆＃13;

＆＃13;

var element = document.getElementById('child');

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

alert(
    element.matches('.bar ' + element.tagName)
);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）

Answer 6

当您使用.children()时，选择器已移至另一个DOM节点。要遍历回父母，您只需使用.end()，即：

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