jQuery Function stops working when there is multiple targets but works when there is one target
173
April 28, 2019, at 4:50 PM
I am trying to make validate my shopping cart when the quantity is changed to zero, as I am basically hiding the minus icon when the html equals zero, it works whenever I have one item in my cart, but stops working when there are multiple items, would anyone know why this is?
In my blade file I have this for each item
<td data-th="Quantity">
<i class="fa fa-minus-circle" data-id="{{$id}}"></i> <span class="quantity-val quantity-{{$id}}">{{ $details['quantity'] }} </span> <i class="fa fa-plus-circle" data-id="{{$id}}"></i>
</td>
and in my JS file I have this function
$(document).ready(function () {
initialQuantity = $('.quantity-val').text();
if(initialQuantity == 0){
$(".fa-minus-circle").hide();
}
});
Would anyone know why this is?
Answer 1
You should make use of .each() to loop over each corresponding cell, and .siblings() to retrieve the corresponding "minus" icons:
$(document).ready(function() {
$('.quantity-val').each(function() {
var initialQuantity = parseInt($(this).text());
if (initialQuantity === 0) {
$(this).siblings('.fa-minus-circle').hide();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<table>
<tr>
<td data-th="Quantity">
<i class="fa fa-minus-circle" data-id="1"></i> <span class="quantity-val quantity-1">10</span> <i class="fa fa-plus-circle" data-id="1"></i>
</td>
</tr>
<tr>
<td data-th="Quantity">
<i class="fa fa-minus-circle" data-id="2"></i> <span class="quantity-val quantity-1">0</span> <i class="fa fa-plus-circle" data-id="2"></i>
</td>
</tr>
</table>
-
05:30
-
04:00
-
00:00
-
10:30
-
9:10
-
07:40
Firebase Cloud Functions: PubSub, "res.on is not a function"
-
04:00
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
-
9:20
-
7:40
POPULAR ONLINE
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 111624 visits
- search for elements in a list 111072 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98836 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 96341 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 92538 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 62054 visits
- Adding methods to es6 child class 22381 visits
![How can I display values between two dates in html page using Thymeleaf in SpringBoot? [on hold]](https://cmsdk.com/images/nophoto.png "How can I display values between two dates in html page using Thymeleaf in SpringBoot? [on hold]")