javascript - 如果内部元素不同，如何从每个循环中获取数组的值

Question

从早上起，我就处于这个 js 的中间，每次我认为它即将完成时，我都会得到另一个 block 。我想要获取的是来自不同元素的值，例如其中一些元素 <input type="text">其他人是 <select>这是我的代码

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

            //console.log($(this).children('.seviyeoptions').val());
            if(key == 1)
            {

                eduarray[index][key].push($(value).children('.seviyeoptions').val());
            }

        });

    });

这是 html 部分

<div id="education-groupbox" class="education-groupbox">
  <div class="inputs col-3">
    <label for="email">Seviye</label>
    <select class="seviyeoptions" name="" id="">
      <option value="option one"></option>
      <option value="option one">Option One</option>
      <option value="option two">Option Two</option>
    </select>
  </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">Mezuniyet Yılı</label>
    <select class="mezuniyetoptions" name="" id="">
      <option value="option one"></option>
      <option value="option one">Option One</option>
      <option value="option two">Option Two</option>
    </select>
  </div>
</div>

我想从 .inputs 类 block 中的所有表单元素中获取所有值。请指教。

Answer 1

给出你的div的id，你当前的选择器$('#'+s+' .inputs').each(function(key, value) {
将不起作用，因为您的 div 上没有具有类 inputs 的 id。

$('#get').on('click', function () {
        var eduarray = [];
        $('.education-groupbox').each(function (index, el) {
            eduarray[index] = [];
            var s = $(this).attr('id');
            //console.log();
            $('#' + s + ' .inputs').each(function (key, value) {
              if ($(this).find('select').length) {
                  eduarray[index].push($(this).find('select > option:selected').val());
              }
              if ($(this).find('input').length) {
                  eduarray[index].push($(this).find('input').val());
              }
            });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
    <div id="select" class="inputs col-3">
        <label for="email">Seviye</label>
        <select class="seviyeoptions" name="" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
    <div id="input" class="inputs col-3">
        <label for="email">Okul Adı</label>
        <input type="text" name="email"/>
    </div>
    <div id="input2" class="inputs col-3">
        <label for="email">Bölüm</label>
        <input type="text" name="email"/>
    </div>
    <div id="input3" class="inputs col-3">
        <label for="email">Mezuniyet Yılı</label>
        <select class="mezuniyetoptions" name="" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
</div>
<button id="get">Get values</button>

更新

您还可以使用对象/关联数组代替标准数组，并使用每个元素的 name 属性的值设置对象属性。

$('#get').on('click', function () {
        var eduarray = {};
        $('.education-groupbox').each(function (index, el) {
            var s = $(this).attr('id');
            //console.log();
            $('#' + s + ' .inputs').each(function (key, value) {
              if ($(this).find('select').length) {
                  eduarray[$(this).find('select').attr('name')] = ($(this).find('select > option:selected').val());
              }
              if ($(this).find('input').length) {
                  eduarray[$(this).find('input').attr('name')] = ($(this).find('input').val());
              }
            });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
    <div id="select" class="inputs col-3">
        <label for="email">Seviye</label>
        <select class="seviyeoptions" name="seviyeoptions" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
    <div id="input" class="inputs col-3">
        <label for="email">Okul Adı</label>
        <input type="text" name="email"/>
    </div>
    <div id="input2" class="inputs col-3">
        <label for="email">Bölüm</label>
        <input type="text" name="email2"/>
    </div>
    <div id="input3" class="inputs col-3">
        <label for="email">Mezuniyet Yılı</label>
        <select class="mezuniyetoptions" name="mezuniyetoptions" id="">
            <option value="option one"></option>
            <option value="option one">Option One</option>
            <option value="option two">Option Two</option>
        </select>
    </div>
</div>
<button id="get">Get values</button>