时间戳

首页 > 解决方案 > 在每个 div 中查找多个输入并将值推送到某种格式

jquery - 在每个 div 中查找多个输入并将值推送到某种格式

问题描述

我想从每个 div 中的输入中获取价值，以某种类似这样的格式

[
 {"room_type_name":"Room1","room_number":10,"avg_price":"1000"},
 {"room_type_name":"Room2","room_number":20,"avg_price":"2000"}
]

这是我的 HTML

<div class="clone_item"> // first Div
  <input class="form-control" name="room_type_name[0]" type="text" value="Room1">                               
  <input class="form-control" name="room_number[0]" type="number" value="10">
  <input class="form-control" name="avg_price[0]" type="number" value="1000"
</div>

<div class="clone_item"> // second Div
  <input class="form-control" name="room_type_name[1]" type="text" value="Room2">                                
  <input class="form-control" name="room_number[1]" type="number" value="20">
  <input class="form-control" name="avg_price[1]" type="number" value="2000">
</div>

这是我的 javascript

var room_array = [];
var i = 0;
var temp_obj = {};
var len =  $(".clone_item :input").length;
$(".clone_item :input").each(function(e){
        var index = this.name.split('[').pop().split(']')[0]; // get number from xxxx[0]
        var name = this.name.split('[')[0];

        temp_obj[name] =  this.value;

        if(i == index || e === (len - 1)) {
            temp_obj[name] =  this.value;
            room_array.push(temp_obj);
            temp_obj = [];
            i++;
        }
    });

问题是 $(".clone_item :input") 运行了 6 次是否有更好的方法来使用 $(".clone_item :input").each？

标签： jquery

解决方案

您可以遍历clone_item 而不是遍历输入，然后使用.find()带有name^选择器的输入 ..^表示以

var Items_array = [];
$(".clone_item").each(function(e){
    var This = $(this),
        Room_type_name_val = This.find("[name^='room_type_name']").val(),
        Room_number_val = This.find("[name^='room_number']").val(),
        Room_avg_price_val = This.find("[name^='avg_price']").val();
     var obj = {
        "room_type_name" : Room_type_name_val,
        "room_number" : Room_number_val,
        "avg_price" : Room_avg_price_val
     }
     Items_array.push(obj);
});

console.log(Items_array);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="clone_item">
  <input class="form-control" name="room_type_name[0]" type="text" value="Room1">                               
  <input class="form-control" name="room_number[0]" type="number" value="10">
  <input class="form-control" name="avg_price[0]" type="number" value="1000"
</div>

<div class="clone_item">
  <input class="form-control" name="room_type_name[1]" type="text" value="Room2">                                
  <input class="form-control" name="room_number[1]" type="number" value="20">
  <input class="form-control" name="avg_price[1]" type="number" value="2000">
</div>

推荐阅读