jquery - 查找子项的值并附加到帖子

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();
});

或者，如果您想确保仅选择，则将 ':input' 替换为 'select'。