Question

我一直在尝试在循环中创建对象。以下是我的代码。

<div class="container">
<div class="personDetails">
<input type="text" class="abc" id="Name1">
<input type="text" class="abc" id="Age1">
</div>
<br /><br />
<div class="personDetails">
<input type="text" class="abc" id="Name2">
<input type="text" class="abc" id="Age2">
</div>
<button onclick="getDetails()">Check Value</button>
</div>

以下是javascript ..

function getDetails(){
var myObj = {};
$('.personDetails').each(function(){
        $(this).children().each(function(){
myObj[$(this).attr('id')] = $(this).val();
            });
    });
console.log(myObj);
}

以下是它在控制台中的样子。但我不想把它全部变成一个对象。我想要的是每个人都应该在该.each循环中创建每个对象。我知道我很接近，但无法弄清楚我做错了什么。

Object {Name1: "cfr", Age1: "15", Name2: "fgatat", Age2: "25"}

我想做

person1 {Name: "cfr", Age: "15"}, 
person2 {Name: "fgatat", Age: "25"}

Answer 1

以下是可能的解决方案之一：

function getDetails(){
  var myObj = [];
  $('.personDetails').each(function() {
        var person = {};
        $(this).children().each(function(){
            person[$(this).attr('id')] = $(this).val();
        });
        myObj.push(person)
    });
   console.log(myObj);
}

Answer 2

您应该使用var

声明window[myvar]

function getDetails(){
$('.personDetails').each(function(i){
  i+=1;
  window["person"+i] = {};
  $(this).children().each(function(){
    window["person"+i][$(this).attr('id')] = $(this).val();
  });
});
console.log(person1);
console.log(person2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="personDetails">
<input type="text" class="abc" id="Name1">
<input type="text" class="abc" id="Age1">
</div>
<br /><br />
<div class="personDetails">
<input type="text" class="abc" id="Name2">
<input type="text" class="abc" id="Age2">
</div>
<button onclick="getDetails()">Check Value</button>
</div>

Answer 3

以下是另一种方法，它可以为您提供您要求的输出

＆＃13;

$('#btn').on('click', function() {
  var result = $('.personDetails').toArray().reduce(function(a, b, i) {
    return a['person' + (++i)] = {
      Name: $(b).find('[id^=Name]').val(),
      Age: $(b).find('[id^=Age]').val()
    }, a;
  }, {});

  console.log(result);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="personDetails">
    <input type="text" class="abc" id="Name1">
    <input type="text" class="abc" id="Age1">
  </div>
  <br /><br />
  <div class="personDetails">
    <input type="text" class="abc" id="Name2">
    <input type="text" class="abc" id="Age2">
  </div>
  <button id="btn">Check Value</button>
</div>

＆＃13;

Answer 4

如果ID始终采用相同的格式NameX和AgeX，您可以使用{{1}更新代码，仅提取Name和Age部分并将它们用作属性。

这应该是你的代码：

$(this).attr('id').replace(/\d+$/, '')

<强>演示：

这是一个有效的演示片段：

＆＃13;

function getDetails() {
  var results = [];
  $('.personDetails').each(function() {
    var person = {};
    $(this).find('input[type="text"]').each(function() {
      person[$(this).attr('id').replace(/\d+$/, '')] = $(this).val();
    });
    results.push(person)
  });
  console.log(results);
}

＆＃13;

function getDetails() {
  var results = [];
  $('.personDetails').each(function() {
    var person = {};
    $(this).find('input[type="text"]').each(function() {
      person[$(this).attr('id').replace(/\d+$/, '')] = $(this).val();
    });
    results.push(person)
  });
  console.log(results);
}

＆＃13;

Answer 5

为什么不尝试以下操作，为输入添加一个使用以下格式 inputName [index] 的名称。这样您就可以使用索引提取代码。从输入中提取值的选择器将是'input[name="inputName[' + index + ']"'的行。然后你需要的就是在for循环中使用它。您甚至可能拥有一个基于jQuery函数生成所有字段的函数。

＆＃13;

(function($) {
  //Object
  function Person(name, age) {
    var self = this;
    self.name = name;
    self.age = age;
    return self;
  }

//actual getDetails function
  function getDetails() {
    var myObj = [];
    var name, age; //These vars are added for readabilitys sake. You could place them directly in the new Person()
    for (i = 0; i < 3; i++) {
      
      name = $('input[name="Name[' + i + ']"').val();
      age = $('input[name="Age[' + i + ']"').val();
      myObj.push(new Person(name, age));
    }

    console.log(myObj);
  }

 //Click Binding
  $("#getDetails").on('click', getDetails);

})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="personDetails">
    <input type="text" class="abc" name="Name[0]">
    <input type="text" class="abc" name="Age[0]">
  </div>
  <br /><br />
  <div class="personDetails">
    <input type="text" class="abc" name="Name[1]">
    <input type="text" class="abc" name="Age[1]">
  </div>
  <div class="personDetails">
    <input type="text" class="abc" name="Name[2]">
    <input type="text" class="abc" name="Age[2]">
  </div>
  <button type="button" id="getDetails">Check Value</button>
</div>

＆＃13;

循环内部的Javascript对象创建

5 个答案: