序列化DIV内容

Question

我试图应用http://jsbin.com/mehupisuhi/1/edit，但我的代码不同，有更多的div和类：

<div class="input_fields_wrap" id="type_list">
   <div class="clonedOperation" id="typeSequence1">
      <div class="container1">
         <label></label>
         <div class="col1"><span class="heading-reference" name="reference" id="reference">1.</span></div>
         <div class="col2">
            <select style="width: 100px;" id="type_operation_1" name="type_operation_1" class="select_type_operation">
               <option disabled="" selected="" value="">None </option>

            </select>
         </div>
         <div class="col3"><select style="width: 100px;" id="select_type_input_1" name="select_type_input_1" class="select_type_input"></select></div>
         <div class="col4"><input style="width: 50px;height:22px;" name="type_operation_rate_1" id="type_operation_rate_1" class="type_operation_rate" kl_virtual_keyboard_secure_input="on"></div>
         <div class="col5"><select style="width: 70px;" id="select_type_unit_1" name="select_type_unit_1" class="type_operation_unit"></select></div>
         <div class="col6"><button class="btn btn-info edit_type_button" type="button" id="edit_type_1"><span class="glyphicon glyphicon-pencil"></span></button></div>
         <div class="col7"><button class="btn btn-danger remove_type_button" type="button" id="remove_type_1"><span class="glyphicon glyphicon-minus"></span></button></div>
      </div>
   </div>
   <div class="clonedOperation" id="typeSequence2" style="display: block;">
      <div class="container1">
         <label></label>
         <div class="col1"><span class="heading-reference" name="ID2_reference" id="ID2_reference">2.</span></div>
         <div class="col2">
            <select style="width: 100px;" id="type_operation_2" name="type_operation_2" class="select_type_operation">
               <option disabled="" selected="" value="">None </option>

            </select>
         </div>
         <div class="col3"><select style="width: 100px;" id="select_type_input_2" name="select_type_input_2" class="select_type_input"></select></div>
         <div class="col4"><input style="width: 50px;height:22px;" name="type_operation_rate_2" id="type_operation_rate_2" class="type_operation_rate" kl_virtual_keyboard_secure_input="on"></div>
         <div class="col5"><select style="width: 70px;" id="select_type_unit_2" name="select_type_unit_2" class="type_operation_unit"></select></div>
         <div class="col6"><button class="btn btn-info edit_type_button" type="button" id="edit_type_2"><span class="glyphicon glyphicon-pencil"></span></button></div>
         <div class="col7"><button class="btn btn-danger remove_type_button" type="button" id="remove_type_2"><span class="glyphicon glyphicon-minus"></span></button></div>
      </div>
   </div>
   <div class="clonedOperation" id="typeSequence3" style="display: block;">
      <div class="container1">
         <label></label>
         <div class="col1"><span class="heading-reference" name="ID3_reference" id="ID3_reference">3.</span></div>
         <div class="col2">
            <select style="width: 100px;" id="type_operation_3" name="type_operation_3" class="select_type_operation">
               <option disabled="" selected="" value="">None </option>

            </select>
         </div>
         <div class="col3"><select style="width: 100px;" id="select_type_input_3" name="select_type_input_3" class="select_type_input"></select></div>
         <div class="col4"><input style="width: 50px;height:22px;" name="type_operation_rate_3" id="type_operation_rate_3" class="type_operation_rate" kl_virtual_keyboard_secure_input="on"></div>
         <div class="col5"><select style="width: 70px;" id="select_type_unit_3" name="select_type_unit_3" class="type_operation_unit"></select></div>
         <div class="col6"><button class="btn btn-info edit_type_button" type="button" id="edit_type_3"><span class="glyphicon glyphicon-pencil"></span></button></div>
         <div class="col7"><button class="btn btn-danger remove_type_button" type="button" id="remove_type_3"><span class="glyphicon glyphicon-minus"></span></button></div>
      </div>
   </div>
   <div class="clonedOperation" id="typeSequence4" style="display: block; opacity: 0.994636;">
      <div class="container1">
         <label></label>
         <div class="col1"><span class="heading-reference" name="ID4_reference" id="ID4_reference">4.</span></div>
         <div class="col2">
            <select style="width: 100px;" id="type_operation_4" name="type_operation_4" class="select_type_operation">
               <option disabled="" selected="" value="">None </option>

            </select>
         </div>
         <div class="col3"><select style="width: 100px;" id="select_type_input_4" name="select_type_input_4" class="select_type_input"></select></div>
         <div class="col4"><input style="width: 50px;height:22px;" name="type_operation_rate_4" id="type_operation_rate_4" class="type_operation_rate" kl_virtual_keyboard_secure_input="on"></div>
         <div class="col5"><select style="width: 70px;" id="select_type_unit_4" name="select_type_unit_4" class="type_operation_unit"></select></div>
         <div class="col6"><button class="btn btn-info edit_type_button" type="button" id="edit_type_4"><span class="glyphicon glyphicon-pencil"></span></button></div>
         <div class="col7"><button class="btn btn-danger remove_type_button" type="button" id="remove_type_4"><span class="glyphicon glyphicon-minus"></span></button></div>
      </div>
   </div>
</div>

我正在使用：

$(function() {
    //define the array
    var operator = [];
    //start looping
    $('#type_list .clonedOperation').each(function(i , e) {
        //automatically add to each pair of tune elements an equal class name
        $(this).children().attr('class','clonedOperation_'+i);
        //create and convert the array to JSON
        operator.push( $.toJSON( $('.clonedOperation_'+i).serializeObject() ) );
    });
    //join all tunes into one comma separated sting
    var operatorFinal = operator.join(",");
    alert( operatorFinal );
});

但我很困惑，因为警报是空的，我知道这是因为它没有序列化clonedOperation。

如何序列化JSON中的字段，如上例所示？

Answer 1

我不知道您的代码中有tune，但我怀疑这是您的实际错误。但是，这里有一些代码可以完成我认为你想做的事情：

这里只是一个通用功能，下面正是您尝试做的事情。 我认为

var jsonAllTheThings = function(class){
  var elements = document.getElementsByClassName(class);
  var packedElements = JSON.stringify(elements);
  return packedElements;
};

//OR more specifically

var doAllTheseSteps = function(){
  var operator = [];

  var parent = document.getElementById('type_list');
  var idsChildren = parent.children();
  for(var i = 0; i < idsChildren.length; i++){
    var child = idsChildren[i];
    child.classList.add("clonedOperation_" + i);
    operator.push(JSON.stringify(child));
  }
  var operatorFinal = operator.join(",");
};

Answer 2

我的解决方案：

使用$ .post（表格）从JQUERY发送​​;

使用PHP只需获取所有数据并在数组中序列化并使用foreach插入数据库。

感谢。