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>

Rent Charter Buses Company
READ ALSO
How can I display values between two dates in html page using Thymeleaf in SpringBoot? [on hold]

How can I display values between two dates in html page using Thymeleaf in SpringBoot? [on hold]

I am trying two display values between two dates in a table in SpringBoot using ThymeleafMy program is running fine but the values are not being displayed

54
How can I wrap JSON object with a parent object or field?

How can I wrap JSON object with a parent object or field?

I need to convert the format of my JSON string called filter_by_address to have a final output like this:

28
How to import mysql database in &#39;Texy! text&#39; format? [on hold]

How to import mysql database in 'Texy! text' format? [on hold]

Somebody used 'Texy! text' as a format to export mysql databaseNow want to import it, but I can't

120
How to fix &ldquo;error&rdquo;:true,&ldquo;message&rdquo;:&ldquo;Required field unavailable&rdquo; to register a user

How to fix “error”:true,“message”:“Required field unavailable” to register a user

i am setting up a php script to connect database and create a new user, bot getting an error

175