找到孩子的值並追加到帖子

Question

我有一個多個div的頁面。我想遍歷每個div，並從它的子節點獲取值和屬性，並創建一個準備好在ajax上發佈的對象。

<div class="items" id="item1"> 
    <div class="form"> 
     <input type="checkbox" name="this" value="1" /> 
     <input type="checkbox" name="that" value="0" /> 
     <select name="other"> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
     </select> 
    </div> 
</div> 

<div class="items" id="item2"> 
    <div class="form"> 
     <input type="checkbox" name="this" value="1" /> 
     <input type="checkbox" name="that" value="0" /> 
     <select name="other"> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
     </select> 
    </div> 
</div> 

<div class="items" id="item3"> 
    <div class="form"> 
     <input type="checkbox" name="this" value="1" /> 
     <input type="checkbox" name="that" value="0" /> 
     <select name="other"> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
      <option value=""></option> 
     </select> 
    </div> 
</div> 

我想構建一個對象使用jQuery將發佈到像下面的ajax。我想從父div中獲取id，並在裏面添加輸入值。像這樣....

data[item1][this] = true 
    data[item1][that] = false 
    data[item1][other] = 'value' 

    data[item2][this] = true 
    data[item2][that] = false 
    data[item2][other] = 'value' 

到目前爲止，我有這個，但找不出如何抓住兒童值

$('.items').each(function(){ 
     /// 
    }); 

Answer 1

下面的代碼可以幫助你

var json = {}; 

$('.items').each(function(){ 
    var id = this.id; 
    json[this.id] = {}; 
    $(this).find("input, select").each(function(){ 
     json[this.name] = this.value; 
    }); 

}); 

Answer 2

這是有點難看，但它可以讓你得到你所需要的東西（它確實依靠點擊事件來確保表單數據實際填充）：

$('button').on('click', function(){ 
    // hold our objects, in preperation for stringification 
    var results = [] 
    $('.form').each(function(){ 
     var form = {}; 
     $(this).children().each(function(){ 
     $item = $(this); 
     console.log($item); 
     form[$item.attr('name')] = $item.val(); 
     }); 
    results.push(form); 
    }); 

    var jsoned = JSON.stringify(results); 
    console.log(jsoned); 
}); 

codepen

Answer 3

或者，你可以只是每過孩子，像這樣：用 '選擇'，如果你只想確保選擇：

$('div.items :input').each(function() { 
    json[this.name] = $(this).val(); 
}); 

或者替換 '輸入' 。