如何在jQuery中从输入字段中获取多个值？

Question

我想使用jquery获取foreach循环中的输入字段值。下面是html结构

    @foreach ($products as $product)
        <div class = "form-row"> 
           <input type="text" name="quantity" class="form-control quantity"value="{{$product->quantity }}">
           <input type="text" name="price" class="form-control price"value="{{$product->price}}">
         </div>
    @endforeach

我试图通过这种方式获得价值

     var quantity = $('.quantity').val();
     var price= $('.price').val();

但这样，我只得到第一行的值。如何使用jQuery获取所有行的值？

Answer 1

您必须遍历所有元素以从中获取值。

您可以尝试jQuery的.map()和.get()来获取数组中的所有值。

演示：

null

var quantityArr = $('.quantity').map(function(){
  return +this.value;
}).get();
console.log(quantityArr);
// if you want the value comma separated then join the array
var quantityCommaSeperatedString = quantityArr.join(',');
console.log(quantityCommaSeperatedString);

var priceArr = $('.price').map(function(){
  return +this.value;
}).get();
console.log(priceArr);
// if you want the value comma separated then join the array
var priceCommaSeperatedString = priceArr.join(',');
console.log(priceCommaSeperatedString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity"value="1">
<input type="text" name="price" class="form-control price"value="10">

<input type="text" name="quantity" class="form-control quantity"value="2">
<input type="text" name="price" class="form-control price"value="20">

<input type="text" name="quantity" class="form-control quantity"value="3">
<input type="text" name="price" class="form-control price"value="30">