Question

我试图从输入datepicker图像和bio等元素中获取所有值到多维数组中，每个循环

我正在输入2个人来测试它的工作原理。这是我想要获取的值的html

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
    <button onclick="WIShowInstaller.newPerson()">Add Person</button>

    <ul class="list-group" id="person">
        <li class="ui-state-default ui-corner-all showperson">
            <article class="post_container" id="PersonPost">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <label for="name" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                        <div class="showpersonnel">Name
                            <input type="text" name="personsName" id="personsName" placeholder="person's Name"></div>
                    </label>

                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <figure class="post-image" id="show_Image">            
                            <div id="dragandrophandler" class="dragandrophandler">Drag & Drop Files Here</div>
                            <div class="showpersonnel">Photo<div class="img-preview" id="preview-1"></div></div>
                            <div class="upload-msg" id="status"></div>
                       </figure>
                   </div>

                   <input type="hidden" name="supload" id="supload" class="supload" value="person">

                   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                       <div class="showpersonnel">Biography
                           <textarea type="text" class="bio" name="bio" id="bio" placeholder="Biography"></textarea>
                      </div>
                   </div>

                   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                       <div class="showpersonnel">D.O.B
                           <input type="text" name="dob" class="dob" id="datepicker-1" placeholder="Date of birth">
                       </div>
                   </div>
               </div>
           </article>
       </li>
   </ul>

这是尝试获取多个值并创建多维数组的jquery代码

WIShowInstaller.InstallPeople = function() {
    var name = $(".personsName").val();
    var textArea = $('textarea.bio');
    var bio = textArea.val();
    var dob = $(".dob").val();
    var img = $(".personImg").attr('value');

    alert(name);
    alert(bio);
    alert(dob);
    alert(img);  /// All the above prints out first set of 4 values only

    var person = [];
    var a = 0;

    $("li.showperson").each(function(i) {
        person[a] = {};

        $(this).find('.showpersonnel').each(function() {
            var title = $(this).text();
            var value = $(this).next(':input').val();
            person[a][title] = value;
        });

        a++;
    });

    console.log(person); /// prints out undefined
}

从console.log打印出来

     Array(2)
           [0]
               "Biography↵ ↵ ":undefined
               "D.O.B↵ ": undefined
               "Name↵ ": undefined
               "Photo": undefined
           [1]
               "Biography":undefined
               "D.O.B":undefined
               "Name": undefined
               "Photo":undefined

Answer 1

我重写了我的回答，考虑到可能有几个个人数据

＆＃13;

const people = Array.from(document.querySelectorAll('.person')).map(person => {
      const obj = {};

      const dataset = Array.from(person.children);

      dataset.forEach(data => {
          switch (data.className) {
              case 'personName':
                  obj.Name = data.value;
                  break;
              case 'bio':
                  obj.Biography = data.value;
                  break
              case 'dop':
                  obj['D.O.B'] = data.value;
                  break
              case 'personImg':
                  obj.Photo = data.value;
                  break
          }
      });

      return obj;
  });

  console.log(people);

＆＃13;

<div class="person">
    <input class="personName" value="alicia">
    <textarea class="bio">nami</textarea>
    <input class="dop" value="goku">
    <input class="personImg" value="krilin">
</div>

<div class="person">
    <input class="personName" value="ken">
    <textarea class="bio">nami</textarea>
    <input class="dop" value="goku">
    <input class="personImg" value="krilin">
</div>

<div class="person">
    <input class="personName" value="usop">
    <textarea class="bio">nami</textarea>
    <input class="dop" value="zoro">
    <input class="personImg" value="sanji">
</div>

＆＃13;

考虑到我没有复制你的HTML，因为它已经饱和了。我确定你可以调整逻辑

jQuery。在dom加载后通过多个元素

1 个答案: