使用 jquery closest 的数组字段总和

Question

我需要一些帮助来解决这个问题，

我动态创建了 div,

<div class='items'>
     Item 1 <input type='text' class='subprice'  name='item[]'> [X]
     Item 2 <input type='text' class='subprice'  name='item[]'> [X]
    <input type='text' class='subprice'  name='subtotal'>
</div>

<div class='items'>
    Item 1 <input type='text' class='subprice'  name='item[]'> [X]
    Item 2 <input type='text' class='subprice'  name='item[]'> [X]
    Item 3 <input type='text' class='subprice'  name='item[]'> [X]
    <input type='text' class='subprice'  name='subtotal'>
</div>

我如何使用 .closest 获取 item[] 的总数组值并将其显示到小计文本字段。请注意 class 项目是动态创建的，因此它可以创建多次。

我试过了

var i = $(.items).closest();
var arr =  i.find('[name="item[]"]');

所以 arr 应该包含最近 class items

内的 item[] 的总和

提前谢谢你。

Answer 1

你的 subtotal 字段应该是数组并尝试，

$('.items').each(function(){
   var items = $(this).find('[name="item[]"]'),
       total=0; 
   items.each(function(){
       total+=Number(this.value);
   });
   $(this).find('[name="subtotal[]"]').val(total);
});

片段，

$(function() {
  function subTotal(items) {
    items.each(function() {
      var items = $(this).find('[name="item[]"]'),
        total = 0;
      items.each(function() {
        total += Number(this.value);
      });
      $(this).find('[name="subtotal[]"]').val(total);
    });
  }
  subTotal($('.items'));
  $('.delete').on('click', function() {
    items = $(this).closest('.items');
    $(this).closest('.item').remove();
    subTotal(items);
  });
});

.delete {
  color: blue;
  cursor: pointer;
  margin: 0 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='items'>
  <div class="item">Item 1 <input type='text' class='subprice' name='item[]' value="8"><span class="delete">Delete</span></div>
  <div class="item">Item 2 <input type='text' value="5" class='subprice' name='item[]'><span class="delete">Delete</span></div>
  <input type='text' class='subprice' name='subtotal[]'>
</div>
<div class='items'>
  <div class="item">Item 1 <input type='text' class='subprice' name='item[]' value="8"><span class="delete">Delete</span></div>
  <div class="item"> Item 2 <input type='text' class='subprice' name='item[]' value="55"><span class="delete">Delete</span></div>
  <div class="item">Item 3 <input type='text' class='subprice' name='item[]' value="14"><span class="delete">Delete</span></div>
  <input type='text' class='subprice' name='subtotal[]'>
</div>

Answer 2

或者，您可以从小计开始并获取其兄弟项（在示例设置中，不需要进一步过滤）：

$('[name=subtotal]').val(function(){
    return $(this).siblings().toArray().reduce(function(sum,inp){return sum + +inp.value;} ,0);
});

$('[name=subtotal]').val(function(){
 return $(this).siblings().toArray().reduce(function(sum,inp){return sum + +inp.value;} ,0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='items'>
     Item 1 <input value=10 type='text' class='subprice'  name='item[]'>
     Item 2 <input value=11 type='text' class='subprice'  name='item[]'>
    <input type='text' class='subprice'  name='subtotal'>
</div>

<div class='items'>
    Item 1 <input value = 5 type='text' class='subprice'  name='item[]'>
    Item 2 <input value = 6 type='text' class='subprice'  name='item[]'>
    Item 3 <input value = 7 type='text' class='subprice'  name='item[]'>
    <input type='text' class='subprice'  name='subtotal'>
</div>

使用 jquery closest 的数组字段总和

sum of array fields using jquery closest

jquery

arrays

closest