jQuery中hasClass的元素循环

Question

我有很多像这样的小卡片：

<div class="card bordered" data-price="99.00">
    <div class="card-header"> Item 1 </div>
    <div class="card-content">Text</div>
</div>

有时候卡片可以处于活动状态，我会这样改变元素类：

```html

有时候卡片可以处于活动状态，我会这样改变元素类：

```

<div class="card bordered" data-price="99.00">
    <div class="card-header alert alert-danger"> Item 1 </div>
    <div class="card-content">Text</div>
</div>

现在，我需要循环遍历所有我的 .card，但仅当类 alert alert-danger 在我的 div.card-header 中时才执行，并弹出 data-price。

我已经尝试过：

$('.card > .card-header').hasClass('alert alert-danger').each(function(i) {
    alert($(this).data('price'));
});

- user4488954

---

$('.card > .card-header.alert.alert-danger') - adeneo

Answer 1

你需要使用filter()代替hasClass()，因为hasClass()返回的是一个布尔值而不是jQuery对象。此外，data-price属性定义在其父元素上，所以使用parent()来获取它的父元素。

$('.card > .card-header').filter('.alert.alert-danger').each(function(i) {
  alert($(this).parent().data('price'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card bordered" data-price="99.00">
  <div class="card-header alert alert-danger">Item 1</div>
  <div class="card-content">Text</div>
</div>

或者只是使用单个选择器

$('.card > .card-header.alert.alert-danger').each(function(i) {
    alert($(this).parent().data('price'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card bordered" data-price="99.00">
  <div class="card-header alert alert-danger">Item 1</div>
  <div class="card-content">Text</div>
</div>

如果你想获取父元素，可以使用 has()

$('.card').has('.card-header.alert.alert-danger').each(function(i) {
  alert($(this).data('price'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card bordered" data-price="99.00">
  <div class="card-header alert alert-danger">Item 1</div>
  <div class="card-content">Text</div>
</div>

- Pranav C Balan