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>

以下のようにajaxに投稿するjqueryを使用してオブジェクトを構築したいと思います。親 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' に置き換えます。