Question

我试图在嵌套的.each（）循环中找到所有.quantity_for_sum值的乘积，其中包含非嵌套数据属性（＆＃39; #product_price＆＃34;），如下所示：

的.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不需要，因为每个容器中始终有单个select元素。

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

如果select容器中有多个.product_list_item，那么在选择.quantity_for_sum时，您必须引用上下文（$this），因为它将从中找到select元素那个父母。

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

参考这个小提琴=＆gt; 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

嵌套JQuery循环中的基本操作

2 个答案: