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的数量可能是无限的。

我需要解析所有这些输入并创建一个对象，其中键是input slot_subclass（slot_name）的第一个slot_type值，而值是第二个值（{ {1}}）。

我尝试了以下内容：

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

Answer 2

首先请注意，没有“JSON对象”这样的东西。 JSON是将数据序列化为字符串的表示法。它绝不是一个对象。

关于您的代码，map()返回一个数组。在您的示例中，此数组仅包含值。相反，您需要更改它以返回一个对象，该对象包含每个input组中.slot_subclass个元素的值。

完成构建数组后，可以使用JSON.stringify构建JSON字符串，如下所示：

var arr = $('.slot_subclass').map(function() {
  var obj = {};
  $(this).find('.slot').each(function() {
    obj[this.name] = this.value;
  });
  return obj;
}).get();

console.log(arr);

var json = JSON.stringify(arr);
console.log(json);

<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">
  </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>

Answer 3

以下内容基于：

其中key是第一个输入的值

＆＃13;

// set values for demo
setDemoValues()
// get data based on above values
var res = {};
$('.slot_subclass').each(function() {
  var $inputs = $(this).find('.slot');      
  res[$inputs[0].value] = $inputs[1].value;      
})

console.log(res)

function setDemoValues() {
  $('.slot_subclass').each(function(i) {
    $(this).find('.slot').val(function() {
      return this.name + (i + 1);
    })
  });

}

＆＃13;

<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">
  </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>

＆＃13;

Answer 4

因此，您可以做的是查询所有输入，将其名称设置为键，将其值设置为输入。

您可能遇到的问题是，如果您现在只是这样做，那么您的值将被覆盖，因为您有多个具有相同名称的输入。

您可以通过向其父容器添加唯一ID或类来解决这个问题。

var inputs = document.querySelectorAll("input");
var data = {};
for (var i = 0; i < inputs.length; i++) {
    data[inputs[i].name] = inputs[i].value;
}

console.log(data);

要获取一组特定的输入，使用上面提到的唯一标识符，您只需更改查询选择器。

var inputs = document.querySelectorAll("#container input");

修改

拥有未知数量的子类，您可以将它们放入数组中。遵循上面相同的JS，这只是一个额外的步骤。

var subclasses = document.querySelectorAll(".slot_subclass"); var data = []; for (var i = 0; i < subclasses.length; i++) { if (!data[i]) data[i] = {}; var inputs = subclasses[i].querySelectorAll("input"); for (var o = 0; o < inputs.length; o++) { data[i][inputs[o].name] = inputs[o].value; } } console.log(data); // outputs like: [ 0: {slot_name: "", slot_type: ""} 1: {slot_name: "", slot_type: ""} 2: {slot_name: "", slot_type: ""} ]

Answer 5

你的方法正确，但你需要改变你的算法。让我们看看$(".slot_subclass")是div元素的数组 - 迭代该数组，并获得'key'和'value'值:)。对于$(".slot_subclass")的每个元素，您可以通过类似$(el).find('.slot')的内容访问第一个和第二个嵌套输入，并且该数组的第一个元素是第一个输入，第二个是第二个输入。

Answer 6

您应该使用each()，而不是map()

＆＃13;

$('.test').on('click', function() {
	var obj = {}
  
  $(".slot_subclass").each(function() {
    var $slots = $(this).find('.slot');

   	obj[$slots.eq(0).val()] = $slots.eq(1).val()
  })
  
  console.log(obj)
})

＆＃13;

<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">      
   </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>

<button class="test">Test</button>

＆＃13;

Answer 7

使用此：

var res = {};
var names = $('.slot[name="slot_name"]');
var types = $('.slot[name="slot_type"]');
for (var i=0;i<names.length;i++) {
    res[$(names[i]).val()]=$(types[i]).val();
}
console.log(res); // = {"name1":type1,...,"nameN":typeN}

如何从多个HTML输入创建一个键：值对象

7 个答案: