javascript - 将每个输入的值保存在 js 对象中

Question

我需要将每个输入的值保存在 js 对象中。这是我的 html 代码:

<div class="produs_varianta">
      <input type="text" class="product_name" value="Product One">
      <input type="text" class="product_code" value="Code One">
</div>
 <div class="produs_varianta">
      <input type="text" class="product_name" value="Product Two">
      <input type="text" class="product_code" value="Code Two">
</div>
 <div class="produs_varianta">
      <input type="text" class="product_name" value="Product Three">
      <input type="text" class="product_code" value="Code Three">
</div> 

我的 .js 代码:

var variante = $('.produs_varianta');
var produs_varianta = [];
variante.each(function(index){
     produs_varianta.push(
     {
         'produs' : 'the value of product_name',
         'cod'    : 'the value of product_code
     }
   );
});

**我尝试使用 $(this).children('.product_name').val() 但我未定义!**

Answer 1

使用.find()，如$(this).find(".class").val()

var variante = $('.produs_varianta');
var produs_varianta = [];
variante.each( function() {
  produs_varianta.push({
    'produs': $(this).find(".product_name").val(),
    'cod': $(this).find(".product_code").val()
  });
});

console.log(produs_varianta)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="produs_varianta">
  <input type="text" class="product_name" value="Product One">
  <input type="text" class="product_code" value="Code One">
</div>
<div class="produs_varianta">
  <input type="text" class="product_name" value="Product Two">
  <input type="text" class="product_code" value="Code Two">
</div>
<div class="produs_varianta">
  <input type="text" class="product_name" value="Product Three">
  <input type="text" class="product_code" value="Code Three">
</div>