Loop between element with hasClass in jQuery

Question

I've little cards like this:

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

Sometime a card can be active so I change the element class like this:

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

Now, I need to loop into all my .card but only if the classes alert alert-danger are in my div.card-header and alert the data-price.

I already tried:

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

Answer 1

You need to use filter() instead of hasClass(), hasClass() returns a Boolean value not jQuery object. Also data-price attribute is defined on it's parent, so use parent() to get it's 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>

Or simply using single selector

$('.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>

If you want to get the parent then you can use 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>