jQuery - Using .each() inside of a function

Question

I'm trying to set up a function that calculates the total when two inputs are changed within an .item. I want this to happen for the inputs on each .item only, but currently the way I have set up my calculateTotal() function does not run for each .item on keyup

function calculateTotal() {
  $(".item").each(function() {
    var item = $(this);
    var qty = item.find(".qty").val();
    var price = item.find(".cost").val();
    var total = Number(qty) * Number(price);
    $(".totalprice").text(total);
  });
}
calculateTotal();
$(".input--item").keyup(function() {
  calculateTotal();
});

.item {
  display: flex;
  align-items: center;
}

.wrap {
  border: 2px solid #eee;
  display: flex;
  flex-direction: column
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="wrap">
    Cost:
    <div class="edit">
      <input class="input--item qty" type="text" name="name" autocomplete="off" value="12" maxlength="3" />
    </div>
    Price:
    <div class="edit">
      <input class="input--item cost" type="text" name="name" autocomplete="off" value="55" maxlength="4" />
    </div>
  </div>
  <span class="totalprice"></span><br>
</div>
<div class="item">
  <div class="wrap">
    Cost:
    <div class="edit">
      <input class="input--item qty" type="text" name="name" autocomplete="off" value="40" />
    </div>
    Price:
    <div class="edit">
      <input class="input--item cost" type="text" name="name" autocomplete="off" value="79" />
    </div>
  </div>
  <span class="totalprice"></span><br>
</div>

$(".totalprice", this) <= you need to find the totalprice for each of the items. or item.find('.totalprice') since you already have a jQuery object for the item. — Taplar
– Taplar, Commented Jul 3, 2019 at 14:34

Rubix's Mind · Accepted Answer · 2019-07-03 14:58:10Z

Use item.find(".totalprice").text(total)

function calculateTotal() {
  $(".item").each(function() {
    var item = $(this);
    var qty = item.find(".qty").val();
    var price = item.find(".cost").val();
    var total = Number(qty) * Number(price);
    item.find(".totalprice").text(total)
    
  });
}
calculateTotal();
$(document).keyup('.input--item',function() {
  calculateTotal();
});

.item {
  display: flex;
  align-items: center;
}

.wrap {
  border: 2px solid #eee;
  display: flex;
  flex-direction: column
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="wrap">
    Cost:
    <div class="edit">
      <input class="input--item qty" type="text" name="name" autocomplete="off" value="12" maxlength="3" />
    </div>
    Price:
    <div class="edit">
      <input class="input--item cost" type="text" name="name" autocomplete="off" value="55" maxlength="4" />
    </div>
  </div>
 <span class="totalprice"></span><br>
</div>
<div class="item">
  <div class="wrap">
    Cost:
    <div class="edit">
      <input class="input--item qty" type="text" name="name" autocomplete="off" value="40" />
    </div>
    Price:
    <div class="edit">
      <input class="input--item cost" type="text" name="name" autocomplete="off" value="79" />
    </div>
  </div>
  <span class="totalprice"></span><br>
</div>

Shridhar Sharma · Accepted Answer · 2019-07-03 14:57:19Z

Here you are changing text of all the divs, instead you have to change the div for the current item, do it like this

function calculateTotal() {
  $(".item").each(function() {
    var item = $(this);
    var qty = item.find(".qty").val();
    var price = item.find(".cost").val();
    var total = Number(qty) * Number(price);
    $(this).find(".totalprice").text(total);
  });
}

calculateTotal();
$(".input--item").on("input",function() {
  calculateTotal();
});

.item {
  display: flex;
  align-items: center;
}

.wrap {
  border: 2px solid #eee;
  display: flex;
  flex-direction: column
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="wrap">
    Cost:
    <div class="edit">
      <input class="input--item qty" type="text" name="name" autocomplete="off" value="12" maxlength="3" />
    </div>
    Price:
    <div class="edit">
      <input class="input--item cost" type="text" name="name" autocomplete="off" value="55" maxlength="4" />
    </div>
  </div>
  <span class="totalprice"></span><br>
</div>
<div class="item">
  <div class="wrap">
    Cost:
    <div class="edit">
      <input class="input--item qty" type="text" name="name" autocomplete="off" value="40" />
    </div>
    Price:
    <div class="edit">
      <input class="input--item cost" type="text" name="name" autocomplete="off" value="79" />
    </div>
  </div>
  <span class="totalprice"></span><br>
</div>

Collectives™ on Stack Overflow

jQuery - Using .each() inside of a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related