jquery - 识别 jQuery 中继承的 css 类

Question

我有以下代码:

<style>
.foo{
color:red;
}
</style>

<div class="foo">
<span>Hello</span>
</div>

我有下面的 jquery 代码来检查 span 标签是否具有类 foo。

$("span").hasClass("foo")

这会返回 false。但我希望它返回 true。如何检查 jquery 中继承的 css 类？

Answer 1

使用.closest('.foo')。 .closest() 在父元素和当前元素上搜索选择器(因此 span 及其父元素)

$('span').each(function() {
  console.log($(this).closest('.foo').length > 0)
})

.foo {
  color: red;
}

.bar {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <span>Hello</span>
</div>
<div>
  <span class="foo">Hello</span>
</div>
<div>
  <span class="bar">Hello</span>
</div>