创建一个 div 子数组答案

【问题标题】：Create an array of div children创建一个 div 子数组
【发布时间】：2018-01-21 22:35:42
【问题描述】：

我有一些带有输入的行。我想为每一行创建一个包含输入值的数组。因此，如果我有 3 行，并且“input1”的值为 1，“input2”的值为 2，“input3”的值为 3，则数组将如下所示：

[
    [1, 2, 3],
    [1, 2, 3],
    [1, 2, 3]
]

这是我的 HTML 代码：

<div class="container">
    <div class="row">
        <input id="input1">
        <input id="input2">
        <input id="input3">
    </div>

    <div class="row">
        <input id="input1">
        <input id="input2">
        <input id="input3">
    </div>

    <div class="row">
        <input id="input1">
        <input id="input2">
        <input id="input3">
    </div>
</div>

如何在 jQuery 中做到这一点？

【问题讨论】：

你真的不应该复制 ID 的。 ID 应该是唯一的标识符。这也不是array。
你需要使用document.createElement或者在jquery中你可以创建一个类似$("<div></div>")的元素。然后分配你使用document.appendChild或在jquery中.append
@imixtron 我认为您对 OP 的要求感到困惑。 OP 不想创建/附加元素。这些元素已经存在于页面上，OP 希望获取每个输入的值并将它们放入 "array"
我通过单击 JS 中的按钮来创建行，因此 ID 是重复的。那我该怎么做呢？
@XenzLSD 然后我建议您在附加它们之前修改它们。使用 javascript 时复制 ID 可能会导致问题

标签： javascript jquery html arrays

【解决方案1】：

据我了解您的问题，我会这样做：

var obj = {};

$('.row').each(function(ind1) {

  obj[ind1] = {};

  $(this).children().each(function (ind2) {

    obj[ind1][ind2] = $(this).val();

  });

});

【讨论】：

【解决方案2】：

HTML：

<div class="container">
    <div class="row">
        <input class="input1">
        <input class="input2">
        <input class="input3">
    </div>

    <div class="row">
        <input class="input1">
        <input class="input2">
        <input class="input3">
    </div>

    <div class="row">
        <input class="input1">
        <input class="input2">
        <input class="input3">
    </div>
</div>

Javascript：

var data = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

$('.container .row').each(function(row) {
  $(this).children().each(function (column) {
    $(this).val(data[row][column]);
  });
});

或

HTML：

<div class="container"></div>

Javascript：

var data = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for(var i = 0; i < data.length; i++){
  var arr = data[i];
  var row = $(".container").append("<div class='row'></div>");
  for(var j = 0; j < arr.length; j++){
    var i_name = 'input-'+i+'-'+j;
    row.append('<input id="'+i_name+'" type="text" name="'+i_name+'" value="'+arr[j]+'">');
  }
}

【讨论】：