Найти значения детей и добавить к сообщению

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 и добавить значения из входных данных внутри. как так ....

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

Или заменить ': ввод' с 'выберите', если вы хотите, чтобы только выбирает ,