Функция jQuery перестает работать при наличии нескольких целей, но работает при наличии одной цели

Question

Я пытаюсь подтвердить свою корзину покупок, когда количество меняется на ноль, так как я в основном скрываю значок минус, когда HTML-код равен нулю, он работает всякий раз, когда у меня есть один элемент в моей корзине, но перестает работать, когда есть несколько предметов, кто-нибудь знает, почему это так?

В моем блейд-файле у меня есть это для каждого предмета

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

и в моем файле JS у меня есть эта функция

$(document).ready(function () {
            initialQuantity = $('.quantity-val').text();

            if(initialQuantity == 0){
                $(".fa-minus-circle").hide();
            }

        });

Кто-нибудь знает, почему это так?

Answer 1

Вы должны использовать .each() для циклического перемещения по каждой соответствующей ячейке и .siblings() для получения соответствующих значков "минус":

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