Loop between element with hasClass in jQuery
12,124
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>
Author by
Admin
Updated on June 14, 2022Comments
-
Admin almost 2 years
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 classesalert alert-danger
are in mydiv.card-header
and alert thedata-price
.I already tried:
$('.card > .card-header').hasClass('alert alert-danger').each(function(i) { alert($(this).data('price')); });