jQueryの各ループから配列内にデータを挿入する方法

Question

私は1つのことを解決しようとしていますが、ほとんどそれを作ったと思っています。私はここで私は間違ってやっているところを修正するために、少し専門家レベルのヘルプが必要だと思う。私はFORMDATAを介してデータを送信し、PHPのフォームを処理することができるように、私が取得しようとしています何

var eduarray = []; 
$('.education-groupbox').each(function(index, el) { 
    eduarray[index] = []; 
    var s = $(this).attr('id'); 
    //console.log(); 
    $('#'+s+' .inputs').each(function(key, value) { 

     //eduarray['index'].push("rohit"); 

    }); 

}); 

はそれぞれ各ループから複数の配列を使用して、オブジェクトの形式で結果です。

<div id="education-groupboxwrapper"> 
        <div id="education-groupbox" class="education-groupbox"> 
         <div class="inputs col-3"> 
         <label for="email">Bölüm</label> 
         <input type="text" name="email" /> 
         </div> 
         <div class="inputs col-3"> 
         <label for="email">Okul Adı</label> 
         <input type="text" name="email" /> 
         </div> 
         <div class="inputs col-3"> 
         <label for="email">Bölüm</label> 
         <input type="text" name="email" /> 
         </div> 
         <div class="inputs col-3"> 
         <label for="email">Bölüm</label> 
         <input type="text" name="email" /> 
         </div> 
        </div> 
        </div> 

Answer 1

を働くことを願っています同じクラス名で

eduarray[index].push($(this).val());を使用して値を配列にプッシュします。したがって、各使用$(this).find('input')内部<div class="education-groupbox">のためのHTMLの各ブロックは、その後、あなたは、アレイへのすべての入力値をプッシュするごとに使用することができ、このブロック内のすべての入力を返しますけれども

$('.education-groupbox').each意志ループ。

var eduarray = []; 
 
$('.education-groupbox').each(function(index, el) { 
 
    var _this = $(this); 
 
    eduarray[index] = []; 
 
    _this.find('input').each(function(key, v) { 
 
    eduarray[index].push(v.value); 
 
    }); 
 

 
}); 
 

 
console.log('eduarray[0] -->' + eduarray[0]); 
 
console.log('eduarray[1] -->' + eduarray[1]); 
 
console.log('eduarray -->' + eduarray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="education-groupboxwrapper"> 
 
    <!-- groupbox 1 --> 
 
    <div class="education-groupbox"> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" value="test1" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Okul Adı</label> 
 
     <input type="text" name="email" value="test2" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" value="test3" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" value="test4" /> 
 
    </div> 
 
    </div> 
 
    <!-- groupbox 2 --> 
 
    <div class="education-groupbox"> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" value="test111" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Okul Adı</label> 
 
     <input type="text" name="email" value="test222" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" value="test333" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" value="test444" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

は、私はIDがユニークであるので、$('#'+s+' inputs').eachは、あなたが同じ入力グループの下に複数の入力を持つことができますので、代わりにクラスを使用し、動作しません、いくつかのバグを発見し、それはあなたのコードから

var eduarray = {}; 
$('.education-groupbox').each(function(index, el) { 
    eduarray.index = []; 
    var s = $(this).attr('id'); 

    $('#'+s+' input').each(function(key, value) { 
     eduarray['index'].push("your value"); 
    }); 
}); 

Answer 3

あなたは事前にシナリオ作業を取得するには、HTML値を埋めてきた以下のway.Iで試すことができます。それに応じて変更してください。
JS

<script> 
     $(document).ready(function(){ 
      var eduarray = []; 
     $('.education-groupbox').each(function(index, el) { 
     eduarray[index] = []; 
     var s = $(this).attr('id'); 
     console.log(s); 
     $('#'+s+' input[type=text]').each(function(key, html) { 
      eduarray[index].push(html.value); 

     }); 

     }); 
     console.log(eduarray) 
     }) 
    </script> 

HTML

<div id="education-groupboxwrapper"> 
        <div id="education-groupbox" class="education-groupbox"> 
         <div class="inputs col-3"> 
         <label for="email">Bölüm</label> 
         <input type="text" name="email" value="123" /> 
         </div> 
         <div class="inputs col-3"> 
         <label for="email">Okul Adı</label> 
         <input type="text" name="email" value="456" /> 
         </div> 
         <div class="inputs col-3"> 
         <label for="email">Bölüm</label> 
         <input type="text" name="email" value="789"/> 
         </div> 
         <div class="inputs col-3"> 
         <label for="email">Bölüm</label> 
         <input type="text" name="email" value="abc" /> 
         </div> 
        </div> 
        </div> 

Answer 4

これは、あなたがそれを行う方法であるjQueryの中のクラスは.[myClass]

$(function() { 
 
    var eduarray = []; 
 
    function submit() { 
 
    $('.education-groupbox').each(function (index, el) { 
 
     eduarray[index] = []; 
 
     var s = $(this).attr('id'); 
 
     $('#' + s + ' .inputs').each(function (key, value) { 
 
     //You have to do it like the previous one but here if you add the data 
 
     eduarray[index][key] = $(value).find("input").val(); 
 
     }); 
 
    }); 
 
    } 
 
    //Then you call the function only when you send 
 
    $("button").click(function() { 
 
    submit(); 
 
    console.log(eduarray); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="education-groupboxwrapper"><div id="education-groupbox1" class="education-groupbox"><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Okul Adı</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div></div><div id="education-groupbox2" class="education-groupbox"><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Okul Adı</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div><div class="inputs col-3"><label for="email">Bölüm</label><input type="text" name="email" /></div></div></div> 
 

 
<button>submit</button>

Answer 5

であることを忘れないでください：

$(function() { 
 
    $('button').on('click', function() { 
 
    var eduarray = {}; 
 
    $('.education-groupbox').each(function(index, el) { 
 
     var s = $(this).attr('id'); 
 
     eduarray[s] = []; 
 
     $(this).find('input').each(function(key, value) { 
 
      eduarray[s].push($(this).val()); 
 
     }) 
 
    }); 
 

 
    console.log(eduarray); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="education-groupboxwrapper"> 
 
    <div id="education-groupbox" class="education-groupbox"> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Okul Adı</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button>SAVE</button>

Iは、（むしろ、配列以外の）オブジェクトを作成し、そして'.education-groupbox'を反復。各要素について、その要素のIDに基づいてそのオブジェクト内に新しい配列を作成しました。次に、ループ内の各要素に対して、すべての入力（$(this).find('input')）を選択し、配列にプッシュしました。

ます。また、このような各入力（あなたがそれを必要とする場合）のラベル保存することができます： `S`と` inputs`は `$（ '＃では、なぜ

$(function() { 
 
    $('button').on('click', function() { 
 
    var eduarray = {}; 
 
    $('.education-groupbox').each(function(index, el) { 
 
     var s = $(this).attr('id'); 
 
     eduarray[s] = {}; 
 
     $(this).find('.inputs').each(function(key, value) { 
 
      var $el = $(this), 
 
       label = $el.children('label').html() 
 
      if('undefined' === typeof eduarray[s][ label ]) { eduarray[s][ label ] = []; } 
 
      eduarray[s][ label ].push($el.children('input').val()); 
 
     }) 
 
    }); 
 

 
    console.log(eduarray); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="education-groupboxwrapper"> 
 
    <div id="education-groupbox" class="education-groupbox"> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Okul Adı</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    <div class="inputs col-3"> 
 
     <label for="email">Bölüm</label> 
 
     <input type="text" name="email" /> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button>SAVE</button>