嵌套 JQuery 循环中的基本操作

Question

我试图在具有非嵌套数据属性 ('#product_price") 的嵌套 .each() 循环中找到所有 .quantity_for_sum 值的所有总和的乘积：

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

然后我想对每个循环的所有 productPrice 值求和。我在嵌套时遇到了很多麻烦。

Answer 1

$('.quantity_for_sum').each 不是必需的，因为每个容器中始终只有一个选择元素。

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

如果您可以在.product_list_item 容器中拥有多个select，则在选择.quantity_for_sum 时，您必须引用上下文($this)，因为它将从该父项中找到选择元素。

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

参考这个小提琴 => https://jsfiddle.net/bsew1a0d/2/

Answer 2

js代码：

$(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);
});
});

工作副本 - http://plnkr.co/edit/UfAl463VBqQBcdcXfMIP?p=preview