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'。

查找子项的值并附加到帖子中

3 个答案: