javascript - 如何创建 key :value object from several HTML inputs

Question

我得到了以下 HTML:

<div class="slot_subclass">
   <div class="form-group">      
        <input type="text" class="form-control slot" name="slot_name">      
   </div>
   <div class="form-group"> 
        <input type="text" class="form-control slot" name="slot_type">
   </div> 
</div> 
<div class="slot_subclass">
   <div class="form-group">      
        <input type="text" class="form-control slot" name="slot_name">      
   </div>
   <div class="form-group"> 
        <input type="text" class="form-control slot" name="slot_type">
   </div> 
</div>
<div class="slot_subclass">
   <div class="form-group">      
        <input type="text" class="form-control slot" name="slot_name">      
   </div>
   <div class="form-group"> 
        <input type="text" class="form-control slot" name="slot_type">
   </div> 
</div>  

slot_subclass 的数量可能是无限的。

我需要解析所有这些输入并创建一个对象，其中键是 slot_subclass (slot_name) 的第一个 input 的值，并且value 是第二个 (slot_type) 的值。

我尝试了以下方法:

$(".slot").map(function(){
    return $(this).val();
}).get();

但我只得到一个简单的值数组。我可能会使用 jQuery 来完成这项任务。谢谢。

UPD_1为了处理相同的键，我选择了以下代码(如果有人感兴趣):

jsonObj = [];
$(".slot_subclass").each(function() { 
    var slot_name = $(this).find("input[name=slot_name]").val();
    var slot_type = $(this).find("input[name=slot_type]").val();
    item = {};
    item[slot_name] =  slot_type;
    jsonObj.push(item);
});
console.log(jsonObj);

谢谢大家的帮助。

Answer 1

喜欢这段代码:

100% 工作并经过测试

jsonObj = [];
$(".slot_subclass").each(function() { 
    var slot_name = $(this).("input[name=slot_name]").val();
    var slot_type = $(this).("input[name=slot_type]").val();
    item = {};
    item["slot_name"] = slot_name;
    item["slot_type"] = slot_type;
    jsonObj.push(item);
});
console.log(jsonObj);

示例:

jsonObj = [];
$(".slot_subclass").each(function() {
	var slot_name = $(this).find("input[name=slot_name]").val();
	var slot_type = $(this).find("input[name=slot_type]").val();
	item = {};
	item["slot_name"] = slot_name;
	item["slot_type"] = slot_type;
	jsonObj.push(item);
});
console.log(jsonObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slot_subclass">
   <div class="form-group">      
	<input type="text" class="form-control slot" name="slot_name" value="1">      
   </div>
   <div class="form-group"> 
	<input type="text" class="form-control slot" name="slot_type" value="11">      
   </div> 
</div> 
<div class="slot_subclass">
   <div class="form-group">      
	<input type="text" class="form-control slot" name="slot_name" value="2">        
   </div>
   <div class="form-group"> 
	<input type="text" class="form-control slot" name="slot_type" value="22">    
   </div> 
</div>
<div class="slot_subclass">
   <div class="form-group">      
	<input type="text" class="form-control slot" name="slot_name" value="3">       
   </div>
   <div class="form-group"> 
	<input type="text" class="form-control slot" name="slot_type" value="33">    
   </div> 
</div>