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

Question

在过去的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>

- Rohit Poonia

---

为什么在 $('#'+s+' inputs') 中，inputs 后面要加上 s？另外，请考虑在问题中发布一个 Minimal, Complete, and Verifiable example，即包含最少必要代码的 HTML 结构。 - Mi-Creativity

请附上HTML部分。 - Pramod Patil

请给出一个例子，说明您想要的内容。 - alessandrio

抱歉之前漏掉了HTML部分..我现在已经补上了..你也可以访问这里并检查当前正在运行的表单http://rohitchoudhary.in/caliphp/register_account - Rohit Poonia

文档中有我链接的示例，还有许多在线教程。 - charlietfl

Answer 1

这是实现方法：

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

- Alon Eitan

Answer 2

从您的代码中，我发现了一些错误：$('#'+s+' inputs').each 是行不通的，因为ID是唯一的，请改用class，这样您可以在相同的输入组下使用相同的类名来拥有多个输入框。

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

$('.education-groupbox').each 将循环遍历每个 HTML 块 <div class="education-groupbox">，因此在 each 中使用 $(this).find('input') 将返回该块中的所有输入，然后您可以使用 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>

- Dalin Huang

---

感谢您的简要介绍，Daniel。希望这可以帮到您，让我试一次。谢谢。 - Rohit Poonia

感谢更新的代码。但是我遇到了“Uncaught TypeError: Cannot read property 'push' of undefined”的问题，位于register_jobseeker.js的第159行。 - Rohit Poonia

@RohitPoonia _this.find('input').each(function(key, v) { eduarray[index].push(v.value); });@RohitPoonia_this.find（'input'）.each（function（key，v）{ eduarray [index] .push（v.value）; }）; - Dalin Huang

嘿，我明白了。eduarray[index].push 这里有一个错误，你救了我的一天，太感谢了！ - Rohit Poonia

让我们在聊天中继续这个讨论。 - Rohit Poonia

Answer 3

不要忘记，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>

- alessandrio

---

嘿，艾薇尔。如果我有一个选择框代替两个输入框的情况，类似于这样：<div class="education-groupbox"> <div class="inputs col-3"> <label for="email">学校名称</label> <select name=""> <option>名称</option> </select> </div> <div class="inputs col-3"> <label for="email">专业</label> <input type="text" name="email" value="test3" /> </div> </div> - Rohit Poonia

如何从两个不同的字段中获取值？ - Rohit Poonia

@RohitPoonia放置：if($(value).find("input").length){/*输入标签*/}else{/*选项标签*/} - alessandrio

Answer 4

你可以尝试以下的方法。我预填了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>

- Pramod Patil

Answer 5

希望它能够正常工作

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

- Sagar Jajoriya

---

“希望它能工作”并没有解释你做了什么不同的事情。更不用说，“inputs”是一个无效的选择器了。 - charlietfl