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

Question

每当我认为它将要完成的时候，我都会在这个js的中间，我又遇到了另一个障碍。 我想要得到的是来自不同元素的值，例如其中一些是<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类块中的所有表单元素中获取所有值。 请指教。

Answer 1

假设您知道模板中可用选择框和输入字段的ID

样例代码

 $("button").click(function(){ var map={}; var arrayList=[]; map.selectOne=$("#selectOne").val(); map.selectTwo=$("#selectTwo").val(); map.email=$("#email").val(); arrayList.push(map); console.info(arrayList); console.log(map); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>selectOne</label> <select id="selectOne"> <option value="option one">Option One</option> <option value="option one">Option Two</option> <option value="option two">Option Three</option> </select> <br> <label>selectTwo</label> <select id="selectTwo"> <option value="option one">Option One</option> <option value="option one">Option Two</option> <option value="option two">Option Three</option> </select> <br> <label for="email">Email</label> <input id="email" type="text" name="email" /> <br> <button>submit</button> 

Answer 2

给定您的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>