Question

我这样的小卡片：

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

有时候卡片可以激活，所以我改变了这样的元素类：

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

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>

在jQuery中使用hasClass在元素之间循环

1 个答案: