Basic Operation in Nested JQuery Loop

Question

I am trying to find the product of all the sum of all .quantity_for_sum values in a nested .each() loop with non-nested data attribute ('#product_price") as so:

.js

$('.quantity_for_sum').change(function() {

 var price = 0;
 var quantity = 0;

    $('.product_list_item').each(function() {
          $this = $(this);

        price = +$this.children('#product_price').data('price');

        $('.quantity_for_sum').each(function() {
            productPrice += +this.value*price
        });
    }); 
     $('.total_count').html(productPrice);
});

.html.erb

<div class="row product_list_item">
    <div id="product_price" data-price="80.00" class="product_right">
        $80.00
    </div>
    <div class="product_right"> 
        <select class="quantity_for_sum" id="order_units_attributes_0_quantity">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <select class="quantity_for_sum" id="order_units_attributes_1_quantity">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
</div>
<div class="row product_list_item">
    <div id="product_price" data-price="100.00" class="product_right">
        $100.00
    </div>
    <div class="product_right"> 
        <select class="quantity_for_sum" id="order_units_attributes_0_quantity">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</div>

I then want to sum all productPrice values for each of these loops. I am having lots of trouble getting the nesting.

Are you sure it will be price = +$this.children('#product_price').data('price'); instead of price += $this.children('#product_price').data('price'); — brk
– brk, Commented Jan 12, 2016 at 4:48

Rayon · Accepted Answer · 2016-01-12 05:22:59Z

$('.quantity_for_sum').each is not needed as there is always single select element in each container.

$('.quantity_for_sum').change(function() {
  var productPrice = 0;
  $('.product_list_item').each(function() {
    var $this = $(this);
    var price = +$this.find('.product_right').data('price');
    var val = $this.find('.quantity_for_sum').val();
    productPrice += +val * price
  });
  $('.total_count').html(productPrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row product_list_item">
  <div id="product_price" data-price="80.00" class="product_right">
    $80.00
  </div>
  <div class="product_right">
    <select class="quantity_for_sum" id="order_units_attributes_0_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</div>
<div class="row product_list_item">
  <div id="product_price" data-price="100.00" class="product_right">
    $100.00
  </div>
  <div class="product_right">
    <select class="quantity_for_sum" id="order_units_attributes_0_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</div>
<div class="total_count"></div>

Fiddle here

If you can have multiple select in .product_list_item container, then while selecting .quantity_for_sum, you must refer the context($this) as it will find the select element from that parent.

$('.quantity_for_sum').change(function() {
  var productPrice = 0;
  $('.product_list_item').each(function() {
    $this = $(this);
    var price = +$this.children('#product_price').data('price');
    $this.find('.quantity_for_sum').each(function() {
      productPrice += +this.value * price
    });
  });
  $('.total_count').html(productPrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row product_list_item">
  <div id="product_price" data-price="80.00" class="product_right">
    $80.00
  </div>
  <div class="product_right">
    <select class="quantity_for_sum" id="order_units_attributes_0_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</div>
<div class="row product_list_item">
  <div id="product_price" data-price="100.00" class="product_right">
    $100.00
  </div>
  <div class="product_right">
    <select class="quantity_for_sum" id="order_units_attributes_0_quantity">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
</div>
<div class="total_count"></div>

Refer this fiddle => https://jsfiddle.net/bsew1a0d/2/

khushboo29 · Accepted Answer · 2016-01-12 05:16:51Z

0

Js code:

$(document).ready(function() {
  $('.quantity_for_sum').change(function() {

  var price = 0;
  var quantity = 0;
  var productPrice = 0

  $('.product_list_item').each(function() {
    $this = $(this);
    price = +$this.children('#product_price').data('price');
  $('.quantity_for_sum').each(function() {
    productPrice += +this.value * price;
  });
 });
 $('.total_count').html("Total: $"+productPrice);
});
});

Working copy - http://plnkr.co/edit/UfAl463VBqQBcdcXfMIP?p=preview

answered Jan 12, 2016 at 5:16

khushboo29

9169 silver badges17 bronze badges

1 Comment

Rayon Over a year ago

Select 1 from first select input -> It will give total as $180 which is wrong. Also explain how your code is different from the one originally posted..

Collectives™ on Stack Overflow

Basic Operation in Nested JQuery Loop

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related