如何在jQuery中从每个循环中插入数组内的数据

时间：2017-05-20 13:31:24

标签： javascript jquery arrays object

从最近5个小时开始，我试图解决一件事情，并认为几乎已经成功，但因为没有得到我想要的结果而卡在某处。我想在这里我需要一点专家级别的帮助来纠正我做错的地方。 

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");

    });

});

我想要得到的是每个循环中带有多个数组的对象格式的结果，这样我就可以通过formdata发送数据并处理php表单。

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

5 个答案:

答案 0 :(得分：2)

您就是这样做的：

$(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>

我创建了一个对象（而不是数组），并迭代'.education-groupbox'。对于每个元素，我根据元素的ID在该对象内创建了一个新数组。接下来，在循环中的每个元素上，我选择了所有输入（$(this).find('input')），并将它们推送到数组。

您还可以保存每个输入的标签（如果需要），如下所示：

$(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>

答案 1 :(得分：1)

从您的代码中我发现了一些错误，$('#'+s+' inputs').each因为ID是唯一的而无法工作，而是使用类，因此您可以在具有相同类名的相同输入组下有多个输入。

使用eduarray[index].push($(this).val());将值推送到数组中。

$('.education-groupbox').each将遍历<div class="education-groupbox">的每个HTML块，因此在每个使用$(this).find('input')的内部将返回此块内的所有输入，然后您可以使用每个输入值将所有输入值推送到数组。

＆＃13;
＆＃13; 
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);
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

不要忘记jQuery中的类是.[myClass]

＆＃13;
＆＃13; 
$(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);
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以尝试使用以下方式。我已预先填充了html值以使方案正常工作。请相应更改。
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>

答案 4 :(得分：-2)

希望它能运作

 function addTeamMember(){
   var tmSheet = SpreadsheetApp.getActive().getSheets()[0];
   var currRow = tmSheet.getLastRow() +1;
    if(tmSheet.getRange(1,100).getValue() == ""){
      buildTriggers()
      tmSheet.getRange(1, 100).setValue("Triggers Set")
    } 

 // a bunch of other stuff that isn't relevant here 
 }

 function buildTriggers(){

     ScriptApp.newTrigger("dailyEmail")
    .timeBased()
    .onWeekDay(ScriptApp.WeekDay.MONDAY)
    .atHour(6)
    .create();

    ScriptApp.newTrigger("dailyEmail")
    .timeBased()
    .onWeekDay(ScriptApp.WeekDay.TUESDAY)
    .atHour(6)
    .create();

    ScriptApp.newTrigger("dailyEmail")
    .timeBased()
    .onWeekDay(ScriptApp.WeekDay.WEDNESDAY)
    .atHour(6)
    .create();

    ScriptApp.newTrigger("dailyEmail")
   .timeBased()
   .onWeekDay(ScriptApp.WeekDay.THURSDAY)
   .atHour(6)
   .create();

   ScriptApp.newTrigger("dailyEmail")
   .timeBased()
   .onWeekDay(ScriptApp.WeekDay.FRIDAY)
   .atHour(6)
   .create();

 }
相关问题
最新问题